I try to create a WebExtension which uses JQuery besides other scripts.
For testing I have modified the "Cookie BG Picker" extension here: https://github.com/mdn/webextensions-examples/tree/master/cookie-bg-picker
I modified two files manifest.json and bgpicker.html
In manifest.json in the head section I added
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ajax.googleapis.com">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>console.log('Hello');</script>
<script>alert('Hello');</script>
and in manifest.json I added at end and:
, "content_security_policy": "default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ajax.googleapis.com"
Result: errors:
Content Security Policy: The page’s settings blocked the loading of a resource at https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js (“script-src moz-extension://328f70d3-087f-46a2-a254-04c48b5a2e88”). (unknown)
13:17:00.676 Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src moz-extension://328f70d3-087f-46a2-a254-04c48b5a2e88”). bgpicker.html:12
13:17:00.676 Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src moz-extension://328f70d3-087f-46a2-a254-04c48b5a2e88”).
Some ideas, what I should change to avoid the errors?
Best
Edit: Finally I got a solution. I created a short excerpt of the extension:
- manifest.json
{
"description": "Create a new window, gather data in that window, update a Github file",
"manifest_version": 2,
"name": "Github-File-Update",
"version": "1.0",
"homepage_url": "https://github.com/...",
"icons": {
"48": "icons/page-48.png"
},
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/page-32.png"
},
"permission": "<all_urls>",
"content_security_policy": "script-src 'self' https://api.github.com; object-src 'self'; img-src 'self'"
}
- background.js
function onCreated(windowInfo) {
console.log("Created window: " + windowInfo.id);
}
function onError(error) {
console.log("Error: "+ error);
}
browser.browserAction.onClicked.addListener((tab) => {
var popupURL = browser.extension.getURL(" github-extension-window.html");
var creating = browser.windows.create({
url: popupURL,
type: "popup",
height: 800,
width: 600
});
creating.then(onCreated, onError);
});
- github-extension-window.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='Content-Language' content='de-DE' />
<link rel="stylesheet" href="github-extension-window.css"/>
<script src="jquery.3.1.1.min.js"></script>
</head>
<body>
<h1 id="page-script-para">Github Extension Window</h1>
<div>Code ...
</div>
<script src="github-extension-window.js"></script>
</body>
</html>
- github-extension-window.css
body {padding: 25px; height: 100%; background: #eee}
- github-extension-window.js
function doit() {
function b64DecodeUnicode(str) {
return decodeURIComponent(Array.prototype.map.call(atob(str), function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
};
function b64EncodeUnicode(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
return String.fromCharCode('0x' + p1);
}));
};
var accessToken = ' ... ';
$.ajax({
url: "https://api.github.com/repos/ ... json?ref=gh-pages",
dataType: 'jsonp',
success: function (data) {
//console.log('...');
},
error: function (error) {
console.log('ERROR GET CONTENT: ' + JSON.stringify(error, null, '\t'));
}
});
$.ajax({
url: "https://api.github.com/repos/ ... json?ref=gh-pages",
dataType: 'jsonp',
success: function (data) {
setSHA(data.data.sha);
},
error: function (error) {
console.log('ERROR GET OLD SHA: ' + JSON.stringify(error, null, '\t'));
}
});
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
var contentBase64 = b64EncodeUnicode('[{"1a": "111a","2a": "222a"}]'); // TEST DATA
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
function setSHA(sha) {
$.ajax({
url: "https://api.github.com/repos/ ... json?access_token=" + accessToken,
type: "PUT",
data: '{"message":"update from api","committer":{"name":"...","email":"..."},"content":"' + contentBase64 + '","sha":"' + sha + '","branch":"gh-pages"}',
success: function (data) {
console.log('RESULT: ' + JSON.stringify(data, null, '\t'));
},
error: function (error) {
console.log('ERROR PUT: ' + JSON.stringify(error, null, '\t'));
}
});
}
}
doit();
Hope, it can help!
