WebExtension(Firefox)和对JQuery

时间:2017-03-13 12:37:27

标签: jquery content-security-policy firefox-webextensions

我尝试创建一个除了其他脚本之外还使用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”).

一些想法,我应该改变哪些以避免错误?

最佳

最后我得到了一个解决方案。我创建了一个扩展的简短摘录:

  1. 的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; }

  2. 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); });

  3. 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>
    

  4. github上延伸-window.css

    body {padding:25px;身高:100%;背景:#eee}

  5. 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;));         }     });

    }

    }

    度特();

  6. 希望,它可以帮助!

0 个答案:

没有答案