Menu
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.org/en-US/Add-ons/WebExtensions/Examples#open-my-page-button",
"manifest_version": 2,
"name": "open-my-page",
"version": "1.0",
"homepage_url": "https://github.com/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.
337
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 recompute 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 incompatible 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.
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';"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
