我尝试创建一个除了其他脚本之外还使用JQuery的WebExtension。
为了进行测试,我修改了" Cookie BG Picker"在此处延伸:https://github.com/mdn/webextensions-examples/tree/master/cookie-bg-picker
我修改了两个文件manifest.json和bgpicker.html
在head部分的manifest.json中我添加了
<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>
并在manifest.json中我在最后添加了:
, "content_security_policy": "default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ajax.googleapis.com"
结果:错误:
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”).
一些想法,我应该改变哪些以避免错误?
最佳
#最后我得到了一个解决方案。我创建了一个扩展的简短摘录:
的manifest.json
{ &#34; description&#34;:&#34;创建一个新窗口,在该窗口中收集数据,更新Github文件&#34;, &#34; manifest_version&#34;:2, &#34; name&#34;:&#34; Github-File-Update&#34;, &#34;版本&#34;:&#34; 1.0&#34;, &#34; homepage_url&#34;:&#34; https://github.com/ ...&#34;, &#34;图标&#34;:{ &#34; 48&#34;:&#34; icons / page-48.png&#34; }, &#34;背景&#34;:{ &#34;脚本&#34;:[&#34; background.js&#34;] }, &#34; browser_action&#34;:{ &#34; default_icon&#34;:&#34; icons / page-32.png&#34; }, &#34;许可&#34;:&#34;&#34;, &#34; content_security_policy&#34;:&#34; script-src&#39; self&#39; https://api.github.com; object-src&#39; self&#39 ;; img-src&#39; self&#39;&#34; }
background.js
function onCreated(windowInfo){ console.log(&#34;创建窗口:&#34; + windowInfo.id); } function onError(error){ console.log(&#34;错误:&#34; +错误); } browser.browserAction.onClicked.addListener((tab)=&gt; { var popupURL = browser.extension.getURL(&#34; github-extension-window.html&#34;); var creating = browser.windows.create({ url:popupURL, 键入:&#34; popup&#34;, 身高:800, 宽度:600 }); creating.then(onCreated,onError); });
github上延伸-window.html
<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>
<h1 id="page-script-para">Github Extension Window</h1>
<div>Code ...
</div>
<script src="github-extension-window.js"></script>
github上延伸-window.css
body {padding:25px;身高:100%;背景:#eee}
github上延伸-window.js
function doit(){
function b64DecodeUnicode(str){ return decodeURIComponent(Array.prototype.map.call(atob(str),function(c){ 返回&#39;%&#39; +(&#39; 00&#39; + c.charCodeAt(0).toString(16))。slice(-2); })加入(&#39;&#39;)); };
function b64EncodeUnicode(str){ return btoa(encodeURIComponent(str).replace(/%([0-9A-F] {2})/ g,function(match,p1){ return String.fromCharCode(&#39; 0x&#39; + p1); })); };
var accessToken =&#39; ......&#39;;
$。AJAX({ url:&#34; https://api.github.com/repos/ ... json?ref = gh-pages&#34;, dataType:&#39; jsonp&#39;, 成功:函数(数据){ //console.log('...'); }, 错误:函数(错误){ console.log(&#39; ERROR GET CONTENT:&#39; + JSON.stringify(错误,null,&#39; \ t&#39;)); } });
$。AJAX({ url:&#34; https://api.github.com/repos/ ... json?ref = gh-pages&#34;, dataType:&#39; jsonp&#39;, 成功:函数(数据){ setSHA(data.data.sha); }, 错误:函数(错误){ console.log(&#39; ERROR GET OLD SHA:&#39; + JSON.stringify(错误,null,&#39; \ t&#39;)); } });
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++ var contentBase64 = b64EncodeUnicode(&#39; [{&#34; 1a&#34;:&#34; 111a&#34;,&#34; 2a&#34;:&#34; 222a&#34;}]&# 39); // 测试数据 // +++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++
function setSHA(sha){
$。AJAX({ url:&#34; https://api.github.com/repos/ ... json?access_token =&#34; + accessToken, 键入:&#34; PUT&#34;, 数据:&#39; {&#34;消息&#34;:&#34;更新自api&#34;,&#34;提交者&#34;:{&#34;名称&#34;:&#34; ...&#34;&#34;电子邮件&#34;:&#34; ...&#34;}&#34;内容&#34;:&#34;&#39; + contentBase64 +&#39;&#34;,&#34; sha&#34;:&#34;&#39; + sha +&#39;&#34;,&#34;分支&#34;:&#34; gh-pages&#34;}&#39;, 成功:函数(数据){ console.log(&#39; RESULT:&#39; + JSON.stringify(data,null,&#39; \ t&#39;)); }, 错误:函数(错误){ console.log(&#39; ERROR PUT:&#39; + JSON.stringify(错误,null,&#39; \ t&#39;)); } });
}
}
度特();
希望,它可以帮助!