I'm running into an issue with a Chrome extension I'm currently working on. Its function is to take user input from the popup textarea and create tabs for each url separated by a line break. Overall, it successfully opens all urls 90% of the time but 10% of the time it only opens 7/10 urls in the textarea. Also, jquery 2.2.3 is used to get the values of the textarea, not sure if that matters.
I'm trying to figure out how/why it will occasionally only open 7/10 urls in the textarea and if it can be fixed. Below is the manifest, popup.html, and backend.js.
backend.js:
function urltoTabs(){
var text = $('textarea').val().split('\n');
for (var h = 0; h <= text.length; h++) {
if (text[h].length < 1) continue;
chrome.tabs.create({url:text[h]});
}
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('engage').addEventListener('click', urltoTabs);
});
popup.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="backend.js"></script>
</head>
<body>
<form>
<p><strong>List urls below<strong><br />
<textarea id="textarea" rows="15"></textarea></p>
<button id="engage">Engage!</button>
</form>
</body>
</html>
manifest.json:
{
"manifest_version": 2,
"name": "Link to Tabs",
"short_name": "Link To Tabs",
"description": "Test url to tabs.",
"version": "0.0.4",
"minimum_chrome_version": "38",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["backend.js"]
}],
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": {
"19": "assets/icon_16.png"
},
"default_title": "New Tabs!",
"default_popup": "popup.html"
},
"icons": {
"16": "assets/icon_16.png",
"128": "assets/icon_128.png"
}
}
I appreciate any help on this!
Answer credit goes to #wolf-war
The issue was the popup would close once tabs were created which would close the operation prematurely. Pushing popup.html and backend.js to the background fixed this issue. All that changed was the manifest.json.
manifest.json:
{
"manifest_version": 2,
"name": "Link to Tabs",
"short_name": "Link To Tabs",
"description": "Test url to tabs.",
"version": "0.0.4",
"minimum_chrome_version": "38",
"background": {
"js": "backend.js", // Needs both js and html to store user input correctly
"page": "popup.html"
},
"permissions": [
"tabs"
],
//content_scripts was removed
"browser_action": {
"default_icon": {
"19": "assets/icon_16.png"
},
"default_title": "New Tabs!",
"default_popup": "popup.html"
},
"icons": {
"16": "assets/icon_16.png",
"128": "assets/icon_128.png"
}
}
Thanks for all the help, I really appreciate it!
Related
I am coding a Web Extension. It opens up as a popup when clicked that user can interact with. Popup displays HTML and CSS correctly, but fails to execute JS.
Here the code of my manifest.json file:
{
"manifest_version": 2,
"name": "To-Do List",
"description": "Keep track of your tasks easily.",
"version": "1.0.0",
"icons": {"128":"icon.png"},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["*://*/"],
"js": ["app.js"]
}
],
"permissions": ["activeTab"]
}
All the files are in same directory!
I'm using the example here as a starting point for accessing some DOM elements on the user's current tab. In popup.html, I have the following:
<script type="text/javascript" src="popup.js"></script>
And the first lines of popup.js are:
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log("test");
console.log('Turning ' + tab.url + ' red!');
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
});
Manifest.json has the following permissions:
{
"manifest_version": 2,
"name": "",
"version": "1.0",
"description": "",
"icons": { "16": "icon16.jpg",
"48": "icon48.jpg",
"128": "icon128.jpg" },
"minimum_chrome_version": "46",
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js", "getDescription.js"],
"run_at": "document_start"
}],
"options_page": "options.html",
"permissions": ["<all_urls>", "tabs","storage", "activeTab"]
}
Nothing is appearing in console, as if function isn't firing at all.
As it mention here onClicked fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
If you want to have the popup and then to execute a script when the icon is clicked use below approach.
{
"name": "My Extension",
"version": "0.1",
"manifest_version" : 2,
"description": "la lala laa",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
Inside the background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "popup.js"});
});
Or it should work fine if you have below in your popup.html
<script src="popup.js"></script>
Inside your popup.js
window.onload = function() {
console.log("do whatever you want here !!!")
}
I'm currently developing a Chrome extension but my it doesn't seem to be able to execute any Javascript.
$(document).ready(function () {
$("#overlay").hide();
});
In this example I'm trying to hide a div with id "overlay" but it doesn't seem to be working. Stored in an external file (popup.js)
Manifest:
{
"name": "Test",
"version": "0.0.1",
"manifest_version": 2,
"description": "",
"offline_enabled": true,
"background": {
"scripts": [
"js/background.js"
]
},
"icons": { "16": "android-16.png",
"48": "android-48.png",
"128": "android-128.png"
},
"browser_action": {
"default_icon" : "android-128.png",
"default_title": "",
"default_popup": "index.html"
},
"permissions": [
"background", "unlimitedStorage", "tabs"
],
"web_accessible_resources": [
"index.html","js/popup.js"
]
}
HTML links situated before body closing tags:
<script src="js/background.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/popup.js"></script>
Just as #Xan mentioned due to the CSP will block the script the best way to avoid this and do it work is downloading jquery.js and make it part of your extension.
So far I have got an extension that lists out the webpage the user is on and a button. The button should, when clicked, fill in the textfield with "testing123".
On the webpage where I am testing the form has a id and name "form" and the textfield has an id and name "body".
If I could get some help filling in this textfield or a general textfield it would be greatly appreciated.
Here are the files I have so far:
manifest.json
{
"name": "Extension Menu",
"version": "1.0",
"manifest_version": 2,
"description": "My extension",
"browser_action": {
"default_icon": "icon.png",
"default_menu": "Menu",
"default_popup": "popup.html"
},
"icons": {
"128": "icon.png"
},
"permissions": [
"tabs", "http://*/*", "activeTab"
]
}
popup.html
<p id="currentLink">Loading ...</p>
<hr />
<ul id="savedLinks"></ul>
<script type="text/javascript" src="popup.js"></script><br>
<button type="button" onclick="fill in text box with the word 'testing123'">Go!</button>
popup.js
chrome.tabs.getSelected(null, function(tab) {
// $("#body").val("testing123");
// document.getElementById('body').value = 'testing123';
document.getElementById('currentLink').innerHTML = tab.url;
});
I have tried using:
$("#body").val("testing123");
document.getElementById('body').value = 'testing123';
but they do not seem to be working.
You can't access the webpage directly from popup. You should use content scripts to do this. Content scripts run in the context of the webpage.
Add this to your manifest :
"content_scripts": [
{
"matches": [
"http://www.example.com/*"
],
"js": [
"jquery.js",
"myscript.js"
]
},
myscript.js :
$("#body").val("testing123");
document.getElementById('body').value = 'testing123';
I would like my Chrome Extension to on show up on google and amazon. My manifest.json looks like this:
{
"background": {"scripts": ["background.js"]},
"content_scripts": [
{
"matches": ["*://*.google.com/*", "http://www.amazon.com/*", "*://*.amazon.com/*"],
"js": ["background.js"]
}
],
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
But it doesn't show up on either google or amazon and I can't figure out why.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
And here is the bookmarlet.js
setTimeout('x99.focus()', 300);
var re = /([\/-]|at[at]n=)/i;
if (re.test(location.href) == true) {
var isbn = RegExp.$2;
var x99 = window.open('http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=' + atatn, 'Library', 'scrollbars=1,resizable=1,top=0,left=0,location=1,width=800,height=600');
x99.focus();
}
Any ideas? Thanks for your help.
Many mistakes in the code.
You don't need content script here, all operations could be executed
within background page content
It it hard to make background page
code works within content script, this is definitely not a your case.
So using the same background.js as both background and content script
does not work in your case at least
Manifest does not declare browser
action.
And so on
I strongly suggest to start with Google extension documentation. You will save a lot of your time.
How I think files might look like
manifest.json
{
"background": {"scripts": ["background.js"]},
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "Do Staff" // optional; shown in tooltip
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// You need more sothisticated regexp here which checks for amazon and google domains
var re = /([\/-]|at[at]n=)/i;
if (re.test(tab.url)) {
var isbn = RegExp.$2;
var url = "http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=" + isbn;
chrome.windows.create({
url : url,
left: 0,
top: 0,
width: 800,
height: 600,
focused: true,
type: "popup"
});
}
});
bookmarlet.js is not needed