I have a very simple webextension that is supposed to open a local page in a new window when a button is clicked:
function openMyPage() {
var popupURL = chrome.extension.getURL("my-page.html");
chrome.windows.create({
url: popupURL,
type: "popup",
height: 200,
width: 200
});
}
chrome.browserAction.onClicked.addListener(openMyPage);
Inside my-page.html I want to run some javascript but I can't get it to work. Even a simple script does not execute:
<html>
<body>
<script type="text/javascript">
document.write("JS executed")
</script>
</body>
</html>
The URL of the opened page is something along the lines of moz-extension://8974747a-3aa7-4654-93e5-ad60d3de0cc5/my-page.html. I've tried disabling addons such as NoScript, but to no avail.
How can I execute JS on this page? What am I doing wrong? Thanks for your help.
Edit: manifest.json as per request:
{
"description": "Adds browser action icon to toolbar to open packaged web page. See ",
"manifest_version": 2,
"name": "open-my-page",
"version": "1.0",
"homepage_url": "",
"icons": {
"48": "icons/page-48.png"
},
"applications": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "45.0"
}
},
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/page-32.png"
}
}
It it taken directly from one of Mozilla's examples.
I have a very simple webextension that is supposed to open a local page in a new window when a button is clicked:
function openMyPage() {
var popupURL = chrome.extension.getURL("my-page.html");
chrome.windows.create({
url: popupURL,
type: "popup",
height: 200,
width: 200
});
}
chrome.browserAction.onClicked.addListener(openMyPage);
Inside my-page.html I want to run some javascript but I can't get it to work. Even a simple script does not execute:
<html>
<body>
<script type="text/javascript">
document.write("JS executed")
</script>
</body>
</html>
The URL of the opened page is something along the lines of moz-extension://8974747a-3aa7-4654-93e5-ad60d3de0cc5/my-page.html. I've tried disabling addons such as NoScript, but to no avail.
How can I execute JS on this page? What am I doing wrong? Thanks for your help.
Edit: manifest.json as per request:
{
"description": "Adds browser action icon to toolbar to open packaged web page. See https://developer.mozilla/en-US/Add-ons/WebExtensions/Examples#open-my-page-button",
"manifest_version": 2,
"name": "open-my-page",
"version": "1.0",
"homepage_url": "https://github./mdn/webextensions-examples/tree/master/open-my-page-button",
"icons": {
"48": "icons/page-48.png"
},
"applications": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "45.0"
}
},
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/page-32.png"
}
}
It it taken directly from one of Mozilla's examples.
Share Improve this question edited Sep 1, 2016 at 22:00 s3rius asked Sep 1, 2016 at 21:05 s3riuss3rius 1,4521 gold badge15 silver badges27 bronze badges 5- Any errors in the Javascript console? – Barmar Commented Sep 1, 2016 at 21:14
- 1 There are some limitations in the JS you can execute in an extension, check this doc developer.chrome./extensions/contentSecurityPolicy – Dario Commented Sep 1, 2016 at 21:20
- Please provide your manifest.json file. We need a plete minimal reproducible example in order to be able to duplicate the problem. – Makyen ♦ Commented Sep 1, 2016 at 21:29
- @Dario This seems to be the right trail. The example on that page is almost exactly what I am trying to do. I'll give it a read, thanks. – s3rius Commented Sep 1, 2016 at 21:59
-
What does the Browser Console (Ctrl-Shift-J, or Cmd-Shift-J on OSX) show wen you try to open your page. I would guess that it shows something like:
Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src moz-extension://nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn”). my-page.html– Makyen ♦ Commented Sep 1, 2016 at 22:08
1 Answer
Reset to default 8Inline scripts don't work with the Default Content Security Policy
You are probably running into the Default Content Security Policy which is:
"script-src 'self'; object-src 'self';"
Which means that Inline JavaScript won't run. In other words things like following are not permitted in your HTML:
<script type="text/javascript"> document.write("JS executed")</script>
or
<script>console.log("foo");</script>
or
<div onclick="console.log('click')">Click me!</div>
Normal solution:
The normal solution is to move all your JavaScript into one, or more, separate files and include them with something like:
<script type="text/javascript" src="my-page.js"></script>
Using inline scripts:
If you desire to use inline scripts, you can use the content_security_policy key in your manifest.json file. However, you will need to supply a "hash of the script in the "script-src" directive."
Unless, for some reason, you really need to use inline scripts, you will probably find it much easier to move all of your script content to an external file rather than include scripts inline with your HTML (which would require you to repute the hash for any change to the script).
Implemented in Firefox 48:
This Content Security Policy was implemented in Firefox 48. That blog post regarding Firefox 48 makes sure to mention:
Please note: this will be a backwards inpatible change for any Firefox WebExtensions that did not adhere to this CSP. Existing WebExtensions that do not adhere to the CSP will need to be updated.
Your specific case:
It will work if you change your script to (whitespace counts when creating the hash):
<script type="text/javascript">document.write("JS executed");</script>
And, add the following line to your manifest.json:
"content_security_policy": "script-src 'self' 'sha256-Z4nYjltJ/RciFs77n2n91dzwoz1Qg/1JFwU5ODwWPC8='; object-src 'self';"