Commit 81750e36 authored by Irina Ivanova's avatar Irina Ivanova

New style and design; refactor the code

parent 4085dca1
# CHANGELOG
### v3.0 29.01.2017
* Refactor the code
* Change style and design
\ No newline at end of file
......@@ -3,27 +3,13 @@ Extension opens URL with one parameter in new tab.
It's useful for people who have to open one URL with different parameter values (for example, some prototype with different page ID-s).
[Page of URL With Parameter Opener](http://ivanova-irina.blogspot.com/p/url-with-parameter-opener.html "Page of URL With Parameter Opener")
[Same extension of FireFox](https://github.com/iriiiina/URL-With-Parameter-Opener-FF "Same extension of FireFox")
[Same extension of FireFox](https://gitlab.com/irina-ivanova-extensions/URL-With-Parameter-Opener-FF "Same extension of FireFox")
# Download and Install
* **[Install](https://chrome.google.com/webstore/detail/url-with-parameter-opener/koidpmicflkfdkkbhoalljjknjeehlph "Install")** last version from Google Store
or
* **[Download](https://github.com/iriiiina/URL-With-Parameter-Opener "Download")** source code from GitHub and load extension manually
# Questions and Comments
Any questions or comments are welcome! You can write me an e-mail on [iriiiina@gmail.com](mailto:iriiiina@gmail.com "iriiiina@gmail.com") or leave a comment on this page.
# Source Code and Issues
Source code and issue reporting is available at GitHub: [https://github.com/iriiiina/URL-With-Parameter-Opener](https://github.com/iriiiina/URL-With-Parameter-Opener "https://github.com/iriiiina/URL-With-Parameter-Opener")
# Screenshots
![URL With Parameter Opener](http://1.bp.blogspot.com/-ge_vHKtYux4/VB0oySaEFdI/AAAAAAAALX0/eRjUBg0wCiQ/s1600/extension.png "URL With Parameter Opener")
![Options of URL With Parameter Opener](http://3.bp.blogspot.com/-SV1qAgE9B-o/VB0oyoDVteI/AAAAAAAALX4/zzrvzVamxOM/s1600/options.png "Options of URL With Parameter Opener")
Any questions or comments are welcome! You can write me an e-mail on [irina.ivanova@protonmail.com](mailto:irina.ivanova@protonmail.com "irina.ivanova@protonmail.com").
# Description
Basically extension simply adds your parameter to specified URL and opens it in new tab:
......@@ -37,7 +23,7 @@ Where `URL` is parameter, that user should specify in Options page (only one tim
* All spaces in the beginning and in the end will be trimmed
* Skype formatting will be trimmed:
`[16.09.2014 13:34:34] Irina Ivanova: PARAMETER`
will be recognized as `PARAMETER`
will be recognised as `PARAMETER`
* Shows history of last 5 inserted values.
# Chrome Tip
......@@ -45,8 +31,7 @@ You can configure hot keys for extension in the Google Chrome:
* open the extensions tab - `chrome://extensions`
* link "Configure commands" at the bottom
* choose an extension and type a shortcut
Now You can use it completely without a mouse!
* now You can use it completely without a mouse!
# Posts About JIRA Issue Opener
* *January 5, 2015* [Getting Started With FireFox Extensions](http://ivanova-irina.blogspot.com/2015/02/getting-started-with-firefox-extensions.html "Getting Started With FireFox Extensions")
......
body {
background-color: white;
font-family: Arial, sans-serif;
font-size: 14px;
color: black
font-family: Lucida Sans Unicode;
color: #28324e;
margin-left: 50px;
}
img {
float: left;
margin: 10px
}
h1 {
color: #333333
a:link, a:visited {
color: #3D8EB9;
}
p {
color: gray;
padding-left: 100px
a:hover {
color: #f37934;
}
table {
padding-left: 50px
}
td {
vertical-align: top
}
#URL-label {
font-weight: bold;
padding-top: 5px
h1 {
color: #FAC51C;
}
#button {
position: relative;
float: left;
padding-left: 40px;
padding-top: 20px;
width: 200px
width: 200px;
}
#status {
position: relative;
color: #006600;
color: #41A85F;
width: 200px;
padding-top: 25px;
float: left
float: left;
}
#error {
position: relative;
color: #CC0000;
color: #B8312F;
padding-top: 25px;
float: left
float: left;
height: 20px;
}
#save {
background-color: #666666;
background-color: #475577;
color: white;
border: 0px;
font-size: 20px;
width: 160px
width: 160px;
}
#save:hover {
background-color: #333333
}
a {
color: #205081
background-color: #f37934;
}
#contacts {
font-size: 10px
}
\ No newline at end of file
body {
min-width: 230px;
overflow-x: hidden;
background-color: #333333;
font-family: Arial, sans-serif;
font-size: 14px;
color: #CCCCCC
}
input {
font-size: 14px;
color: #000000
height: 120px;
background-color: #FAC51C;
font-family: Lucida Sans Unicode;
text-align: center;
margin-bottom: 30px;
}
#error {
font-size: 14px;
color: #CC0000;
color: #B8312F;
padding-bottom: 10px;
text-align: center
}
#info {
float: right;
color: gray;
font-size: 10px
height: 20px;
}
.description {
text-align: right;
font-size: 11px;
color: #CCCCCC
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html>
<html>
<html lang="en-us">
<head>
<title>URL With Parameter Opener</title>
<script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/openURL.js" type="text/javascript" charset="utf-8"></script>
<title>URL&p</title>
<script type="text/javascript" src="js/jquery-1.10.2.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-ui.js" charset="utf-8"></script>
<script type="text/javascript" src="js/openURL.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="error">
<br/>
</div>
<div id="error"></div>
<div id="parameterInput">
<label for="parameter">Parameter:&nbsp;</label>
<input type="text" name="parameter" id="parameter" maxlength="100" size="16" autofocus />
<p class="description">Insert parameter</p>
<p class="description">Spaces and Skype formatting will be trimmed</p>
<p class="description">URL will be opened in new tab</p>
</div>
</body>
</html>
function setErrorText(errorText) {
var divError = document.getElementById('error');
divError.innerText = errorText + '\n';
var divError=document.getElementById("error");
divError.innerText=errorText + "\n";
};
function colorBorderToRed(element) {
var border = document.getElementById(element);
border.style.borderColor = '#FF6666';
border.focus();
border.select();
};
function returnError(errorText, element) {
function returnError(errorText) {
setErrorText(errorText);
colorBorderToRed(element);
throw '';
throw "";
};
var parameter,
url,
isError = 0;
isError=0;
function removeSpaces(string) {
while (string.charAt(string.length - 1) === ' ') {
string = string.slice(0, string.length - 1);
while (string.charAt(string.length - 1) === " ") {
string=string.slice(0, string.length - 1);
}
if (string.charAt(0) === ' ') {
var temp = string.split(' ');
string = temp[temp.length - 1];
if (string.charAt(0) === " ") {
var temp=string.split(" ");
string=temp[temp.length - 1];
}
return string;
};
function removeSkypeFormatting(string) {
if (string.charAt(0) === '[') {
var temp = string.split(' ');
string = temp[temp.length - 1];
if (string.charAt(0) === "[") {
var temp=string.split(" ");
string=temp[temp.length - 1];
}
return string;
};
function openWindow() {
window.open(url + parameter);
};
var list = [];
var list=[];
$(function () {
chrome.storage.sync.get(function (items) {
if (items.savedHistory0 === undefined) {
list[0] = "";
} else {
list[0] = items.savedHistory0;
}
if (items.savedHistory1 === undefined) {
list[1] = "";
} else {
list[1] = items.savedHistory1;
}
if (items.savedHistory2 === undefined) {
list[2] = "";
} else {
list[2] = items.savedHistory2;
}
if (items.savedHistory3 === undefined) {
list[3] = "";
} else {
list[3] = items.savedHistory3;
}
if (items.savedHistory4 === undefined) {
list[4] = "";
} else {
list[4] = items.savedHistory4;
}
chrome.storage.sync.get(function (items) {
if (items.savedHistory0 === undefined) {
list[0]="";
} else {
list[0]=items.savedHistory0;
}
if (items.savedHistory1 === undefined) {
list[1]="";
} else {
list[1]=items.savedHistory1;
}
if (items.savedHistory2 === undefined) {
list[2]="";
} else {
list[2]=items.savedHistory2;
}
if (items.savedHistory3 === undefined) {
list[3]="";
} else {
list[3]=items.savedHistory3;
}
if (items.savedHistory4 === undefined) {
list[4]="";
} else {
list[4]=items.savedHistory4;
}
});
$('#parameter').autocomplete({
source: function(request, response) {
var results = $.ui.autocomplete.filter(list, request.term);
if (list[0] === "") {
response(results.slice(0, 0));
} else if (list[1] === "") {
response(results.slice(0, 1));
} else if (list[2] === "") {
response(results.slice(0, 2));
} else if (list[3] === "") {
response(results.slice(0, 3));
} else if (list[4] === "") {
response(results.slice(0, 4));
} else {
response(results.slice(0, 5));
}
}
});
$("#parameter").autocomplete({
source: function(request, response) {
var results=$.ui.autocomplete.filter(list, request.term);
if (list[0] === "") {
response(results.slice(0, 0));
} else if (list[1] === "") {
response(results.slice(0, 1));
} else if (list[2] === "") {
response(results.slice(0, 2));
} else if (list[3] === "") {
response(results.slice(0, 3));
} else if (list[4] === "") {
response(results.slice(0, 4));
} else {
response(results.slice(0, 5));
}
}
});
});
function saveHistory(parameter) {
chrome.storage.sync.get(function (items) {
list[0] = items.savedHistory0;
list[1] = items.savedHistory1;
list[2] = items.savedHistory2;
list[3] = items.savedHistory3;
list[4] = items.savedHistory4;
for (var i = 4; i > 0; i--) {
list[i] = list[i-1];
}
list[0] = parameter;
chrome.storage.sync.set({
savedHistory0: list[0],
savedHistory1: list[1],
savedHistory2: list[2],
savedHistory3: list[3],
savedHistory4: list[4]
}, function() {});
});
list[0]=items.savedHistory0;
list[1]=items.savedHistory1;
list[2]=items.savedHistory2;
list[3]=items.savedHistory3;
list[4]=items.savedHistory4;
for (var i=4; i > 0; i--) {
list[i]=list[i-1];
}
list[0]=parameter;
chrome.storage.sync.set({
savedHistory0: list[0],
savedHistory1: list[1],
savedHistory2: list[2],
savedHistory3: list[3],
savedHistory4: list[4]
}, function() {});
});
}
function openURL() {
chrome.storage.sync.get(function (item) {
url = item.savedUrl;
parameter = document.getElementById('parameter').value;
parameter = removeSpaces(parameter);
parameter = removeSkypeFormatting(parameter);
if (parameter === '') {
isError = 1;
returnError('Please insert parameter', 'parameter');
} else if (url === undefined) {
isError = 1;
returnError('Please define URL in Options', 'parameter');
url=item.savedUrl;
parameter=document.getElementById("parameter").value;
parameter=removeSpaces(parameter);
parameter=removeSkypeFormatting(parameter);
if (parameter === "") {
isError=1;
returnError("Please insert parameter");
} else if (url === undefined) {
isError=1;
returnError("Please define URL in Options");
} else {
saveHistory(parameter);
openWindow();
......@@ -160,8 +138,7 @@ function openURL() {
};
function inputParameterListener(e) {
var enter = 13;
var enter=13;
if (e.keyCode === enter) {
openURL();
......@@ -169,23 +146,21 @@ function inputParameterListener(e) {
};
function listenInputParameter(inputParameter) {
if (inputParameter.addEventListener) {
inputParameter.addEventListener('keydown', inputParameterListener, false);
inputParameter.addEventListener("keydown", inputParameterListener, false);
} else if (inputParameter.attachEvent) {
inputParameter.attachEvent('keydown', inputParameterListener);
inputParameter.attachEvent("keydown", inputParameterListener);
}
};
function listenParameter() {
listenInputParameter(document.getElementById('parameter'));
listenInputParameter(document.getElementById("parameter"));
};
if (window.addEventListener) {
window.addEventListener('load', this.listenParameter, false);
window.addEventListener("load", this.listenParameter, false);
} else if (window.attachEvent) {
window.attachEvent('onload', this.listenParameter);
window.attachEvent("onload", this.listenParameter);
} else {
document.addEventListener('load', this.listenParameter, false);
}
\ No newline at end of file
document.addEventListener("load", this.listenParameter, false);
}
function saveOptions() {
var url = document.getElementById('urlOption').value;
var status = document.getElementById('status');
var error = document.getElementById('error');
var border = document.getElementById('urlOption');
if (url === '') {
error.textContent = 'Please fill URL';
border.style.borderColor = '#CC0000';
border.focus();
var url=document.getElementById("urlOption").value;
var status=document.getElementById("status");
var error=document.getElementById("error");
var border=document.getElementById("urlOption");
if (url === "") {
error.textContent="Please fill URL";
border.style.borderColor="#CC0000";
border.focus();
} else {
error.innerText = '\n';
border.style.border = '';
border.focus();
border.select();
chrome.storage.sync.set({
savedUrl: url
}, function () {
status.textContent = 'URL is saved';
setTimeout(function () {
status.textContent = '';
}, 2000);
});
}
error.innerText="\n";
border.style.border="";
border.focus();
border.select();
chrome.storage.sync.set({
savedUrl: url
}, function () {
status.textContent="URL is saved";
setTimeout(function () {
status.textContent="";
}, 2000);
});
}
}
function restoreOptions() {
chrome.storage.sync.get({
savedUrl: "http://example.com?parameter="
}, function (items) {
document.getElementById('urlOption').value = items.savedUrl;
document.getElementById('urlOption').select();
document.getElementById("urlOption").value=items.savedUrl;
document.getElementById("urlOption").select();
});
}
document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click',
saveOptions);
document.addEventListener("DOMContentLoaded", restoreOptions);
document.getElementById("save").addEventListener("click", saveOptions);
var enter = 13;
var enter=13;
function inputURLListener(e) {
'use strict';
if (e.keyCode === enter) {
saveOptions();
}
}
function listenInputURL(inputURL) {
'use strict';
if (inputURL.addEventListener) {
inputURL.addEventListener('keydown', inputURLListener, false);
inputURL.addEventListener("keydown", inputURLListener, false);
} else if (inputURL.attachEvent) {
inputURL.attachEvent('keydown', inputURLListener);
inputURL.attachEvent("keydown", inputURLListener);
}
}
function listenURL() {
'use strict';
listenInputURL(document.getElementById('urlOption'));
listenInputURL(document.getElementById("urlOption"));
}
if (window.addEventListener) {
window.addEventListener('load', listenURL, false);
window.addEventListener("load", listenURL, false);
} else if (window.attachEvent) {
window.attachEvent('onload', listenURL);
window.attachEvent("onload", listenURL);
} else {
document.addEventListener('load', listenURL, false);
}
\ No newline at end of file
document.addEventListener("load", listenURL, false);
}
{
"name": "URL With Parameter Opener",
"name": "URL&p",
"version": "2.0",
"manifest_version": 2,
"description": "Extension opens URL with one parameter in new tab",
......
<!DOCTYPE html>
<html>
<html lang="en-us">
<head>
<title>Options of URL With Parameter Opener</title>
<title>URL&p 2.0</title>
<link rel="stylesheet" type="text/css" href="css/options.css" />
</head>
<body>
<h1>URL&p 2.0</h1>
<p>Extension opens URL with one parameter in new tab</p>
<p>Read more on <a href="https://gitlab.com/irina-ivanova-extensions/URL-With-Parameter-Opener">GitLab repo</a> or write to <a href="mailto:irina.ivanova@protonmail.com">irina.ivanova@protonmail.com</a></p>
<table>
<tr>
<td>
<h1>Options of URL With Parameter Opener</h1>
<p>Extension opens URL with one parameter in new tab</p>
<p id="contacts">Read more on <a href="http://ivanova-irina.blogspot.com/p/url-with-parameter-opener.html" target="_blank">URL With Parameter Opener page</a>
<br />
<a href="mailto:iriiiina@gmail.com">iriiiina@gmail.com</a>
</p></td>
<td>
<img src="icons/big.png" width="130" alt="Fisheye icon" /></td>
</tr>
</table>
<br />
<br />
<br />
<table>
<tr>
<td colspan="2"><div id="error"><br /></div></td>
<td colspan="2"><div id="error"></div></td>
</tr>
<tr>
<td id="URL-label">
<td>
<label for="urlOption">URL:
</label>
</td>
<td>
<input type="text" name="urlOption" id="urlOption" maxlength="255" size="70" autofocus />&nbsp;<code>PARAMETER</code>
<input type="text" id="urlOption" maxlength="255" size="70" autofocus />&nbsp;<code>PARAMETER</code>
</td>
</tr>
<tr>
......
screenshots/options.png

42.2 KB | W: | H:

screenshots/options.png

59.6 KB | W: | H:

screenshots/options.png
screenshots/options.png
screenshots/options.png
screenshots/options.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment