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.
Related
I have used "<all_urls>" for permissions.
But, I am getting this error. "Cannot access contents of the page. Extension manifest must request permission to access the respective host."
chrome.tabs.create({ url: 'chrome-extension://padekgcemlokbadohgkifijomclgjgif/options.html#!/profile/proxy' }, function(tab) {
chrome.tabs.executeScript(tab.id, { file: 'js/content.js' });
});
manifest.json
{
"manifest_version": 2,
"version": "1.0.0",
"name": "Gmail Automation",
"description": "Automation",
"permissions": [
"storage",
"notifications",
"<all_urls>"
],
"icons": {
"16": "resources/img/16.png",
"32": "resources/img/32.png",
"48": "resources/img/48.png",
"64": "resources/img/64.png"
},
"web_accessible_resources": ["js/content.js"],
"background": {
"persistent": false,
"scripts": [
"/js/background.js"
]
}
}
If this is not possible. Then please suggest me other ways to do. My goal is to change or modify options in other existing extensions.
I have the following really simple code in a content script that runs whenever a button in my "popup.html" file is pressed:
Section of code inside "inject.js"
browser.runtime.onMessage.addListener((message) => {
console.log("Trying to inject iFrame");
var iframe = document.createElement("iframe");
iframe.src = browser.extension.getURL("inject.html");
document.body.appendChild(iframe);
});
The content of "inject.html" is:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
Hello. This is a Test.
</p>
</body>
</html>
However, when this code runs I get the following output in the console (Using "example.com: as an example URL):
Trying to inject iFrame
Security Error: Content at http://example.com/ may not load or link to moz-extension://218287b3-46eb-4cf6-a27f-45b9369c0cd9/inject.html.
Here is my "manifest.json"
{
"manifest_version": 2,
"name": "Summarizer",
"version": "1.0",
"description": "Summarizes webpages",
"permissions": [
"activeTab",
"tabs",
"storage",
"downloads",
"*://*.smmry.com/*"
],
"icons":
{
"48": "icons/border-48.png"
},
"browser_action":
{
"browser_style": true,
"default_popup": "popup/choose_length_page.html",
"default_icon":
{
"16": "icons/summarizer-icon-16.png",
"32": "icons/summarizer-icon-32.png"
}
}
"web_accessible_resources": [
"inject.html"
]
}
And, lastly, here is the top level file structure of my extension:
How can I fix this security error?
This is not a duplicate of this: Security error in Firefox WebExtension when trying getUrl image because I provided the full path in my manifest.json
I was missing a comma. Here is the relevant portion of the manifest.json with the comma in place:
"browser_action":
{
"browser_style": true,
"default_popup": "popup/choose_length_page.html",
"default_icon":
{
"16": "icons/summarizer-icon-16.png",
"32": "icons/summarizer-icon-32.png"
}
},
"web_accessible_resources": [
"inject.html"
]
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!
I am trying to add Jquery to my chrome extension ,
here is my manifest.json
{
"name": "OSpy",
"description": "",
"version": "1",
"manifest_version": 2,
"background":{
"scripts":["background.js"]
},
"js": ["js/jquery-1.10.2.min.js"]
"browser_action": {
"default_title": "Object Spy"
},
"permissions":["tabs","<all_urls>"],
"web_accessible_resources": [
"img/bt.png"
"js/jquery-1.10.2.min.js"
]
}
Problem is it is giving ,
Uncaught ReferenceError: $ is not defined
Apparently, your extension uses primarily background page and that is the place where you need jQuery. In this case, you can simply add jQuery JavaScript file in the list of background scripts:
{
"name": "OSpy",
"description": "",
"version": "1",
"manifest_version": 2,
"background":{
"scripts":["js/jquery-1.10.2.min.js", "background.js"]
},
"browser_action": {
"default_title": "Object Spy"
},
"permissions":["tabs","<all_urls>"]
}
REMEMBER TO PUT JQUERY SCRIPT BEFORE YOUR ACTUAL BACKGROUND SCRIPT!
Here's a simple example. Let's say you have an extension that makes Ajax request from its background page to its local html file and print the response to the console.
manifest.json:
{
"name": "Local Request",
"description": "Send Ajax request using jQuery",
"version": "2.0",
"background": {
"scripts": ["js/jquery-1.10.2.min.js", "background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Send Request"
},
"manifest_version": 2
}
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
$.get("ajax/test.html", function(data) {
console.log(data);
});
});
Do the same steps to use jQuery in your content script. Here's an example of doing that in official documentation: http://developer.chrome.com/extensions/content_scripts.html ("js": ["jquery.js", "myscript.js"]).
I have a simple chrome extension which displays a little icon in Google Chrome. On click, it loads a search page of my site, which in term redirects you to the right page.
https://chrome.google.com/webstore/detail/w3patrol-watch-over-any-w/addcgpijdjacmndaadfgcpbfinagiplm is the extension.
Now, Google is forcing me to update to manifest version 2, instead of 1. But this is breaking my working extension.
In manifest.json I have added manifest_version 2, but since then the icon does not work anymore when I click on it.
{
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "icon19.png",
"default_title": "__MSG_default_title__"
},
"default_locale": "en",
"description": "__MSG_description__",
"icons": {
"128": "icon128.png",
"19": "icon19.png",
"48": "icon48.png"
},
"name": "__MSG_name__",
"permissions": [ "tabs", "http://*.w3patrol.com/" ],
"update_url": "http://clients2.google.com/service/update2/crx",
"version": "1.0",
"manifest_version": 2
}
This is background.html
<script type="text/javascript">
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null,function(tab) {
chrome.tabs.create( { url: "http://w3patrol.com/search.php?q=" +tab.url } );
});
});
</script>
What do I need to add/change to get it working with manifest version 2?
You just need to remove the script tag from your background page. Here's how background.js(instead of background.html) should look like:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null,function(tab) {
chrome.tabs.create( { url: "http://w3patrol.com/search.php?q=" +tab.url } );
});
});
And remove the 'page' property in background. Add 'scripts' property:
"background": {
"scripts": ["background.js"]
},