在内容脚本中使用jquery进行Chrome扩展可在创建对话框窗口时解决错误

Question

我尝试在Chrome扩展程序中使用jQuery和jQuery-UI.每次创建新选项卡时,我都会尝试在内容脚本对话框窗口中创建但我会继续:

Property '$' of object [object Window] is not a function 

我想我在加载脚本时做错了.这就是我所拥有的:

{
"name":"Sample",
"description":"This is a sample",
"manifest_version":2,
"version":"2",
"background":{
    "scripts":["background.js"]
},
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js","myscript.js"]
      "run_at":"document_end",
      "all_frames": true
    }
  ],
"web_accessible_resources": [
    "client.js","jquery-1.8.3.min.js","jquery-ui.js"
  ],
"permissions": [ 
        "unlimitedStorage",
        "http://*/",
        "<all_urls>",
        "tabs"
   ]
}

myscript.js(内容脚本):

var ss = document.createElement('script');
ss.type = "text/javascript";
ss.src = chrome.extension.getURL('jquery-1.8.3.min.js');
ss.onload = function() {
    ss.parentNode.removeChild(ss);
     console.log("jquery-1.8.3.min.js loaded");

};

var ss_ui = document.createElement('script');
ss_ui.type = "text/javascript";
ss_ui.src = chrome.extension.getURL('jquery-ui.js');
ss_ui.onload = function() {
    ss_ui.parentNode.removeChild(ss_ui);
    console.log("jquery-ui.js loaded");
};


var s = document.createElement('script');
s.type = "text/javascript";
s.src = chrome.extension.getURL('client.js');
s.onload = function() {
    s.parentNode.removeChild(s);
    console.log("client.js loaded");
};

        try{

            (document.head||document.documentElement).appendChild(ss);
            (document.head||document.documentElement).appendChild(ss_ui);
            (document.head||document.documentElement).appendChild(s);

        }catch(e){
          console.log("exception in appendChild");
        }  

client.js(我创建对话框的地方)

       try{
        console.log("Starting to create tabel");

        var layerNode= document.createElement('div');
            layerNode.setAttribute('id','dialog');
            layerNode.setAttribute('title','Basic dialog');
        var pNode= document.createElement('p');
            pNode.innerHTML = "This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.";

        layerNode.appendChild(pNode);
        document.body.appendChild(layerNode);


        jq162 = jQuery.noConflict(true);
(function($){
    $(document).ready(function() {
       $("#dialog" ).dialog();
    });
})(jq162);

        }
        catch(e){
          console.log("script in page exception in appendChild"+e);
          //alert(e);
        }  

当我在控制台中看到我看到打印顺序时:

Starting to create tabel client.js:2
script in page exception in appendChildTypeError: Cannot call method 'dialog' of null client.js:26
client.js loaded chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/myscript.js:24
jquery-1.8.3.min.js loaded chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/myscript.js:6
jquery-ui.js loaded   

我在这做错了什么？

Answer 1

通常的discalimer,我不是真的做JQuery ...但我看到你的代码明显的问题,所以给了它一个镜头......

摆脱client.js后,将它注入的文件添加到清单的内容脚本部分后不再需要它.将它们添加到清单后,Chrome会立即为您注入它们.一旦你这样做,它开始一半的工作.

之后,我注意到对话框出现但没有图形/样式,因此您需要将css文件添加到清单的内容脚本部分以进行注入.现在有一些风格,但控制台说它无法获得风格所需的图形文件.

我不知道最好的方法是从css文件中引用扩展目录中包含的图形文件,所以我只是将所有图形转换为dataurl并将它们放在css文件中.您可以使用像这样的工具......
http://dataurl.net/#dataurlmaker
...来完成这项工作.
现在我们有一个漂亮的对话框.

的manifest.json

{
"name":"JQery UI Dialog",
"description":"https://stackoverflow.com/questions/13669762/chrome-extention-using-jquery-in-content-script-resolve-error-when-creating-dial",
"manifest_version":2,
"version":"2",
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js"],
      "run_at":"document_end",
      "all_frames": true,
      "css":["jquery-ui-base64.css"]
    }
  ],
"web_accessible_resources": [
    "client.js","jquery-1.8.3.min.js","jquery-ui.js"
  ],
"permissions": [ 
        "unlimitedStorage",
        "http://*/",
        "<all_urls>",
        "tabs"
   ]
}

jquery-ui-base64.css
https://gist.github.com/4193693
认为放在这里可能有点大.

client.js

try {
  console.log("Starting to create tabel");

  var layerNode = document.createElement('div');
  layerNode.setAttribute('id', 'dialog');
  layerNode.setAttribute('title', 'Basic dialog');
  var pNode = document.createElement('p');
  pNode.innerHTML = "This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.";

  layerNode.appendChild(pNode);
  document.body.appendChild(layerNode);


  jq162 = jQuery.noConflict(true);
  (function($) {
    $(document).ready(function() {
      $("#dialog").dialog();
    });
  })(jq162);



} catch(e) {
  console.log("script in page exception in appendChild" + e);
  //alert(e);
}

编辑
使用chromes i18n支持我们可以更改css中图像的URL,以便它们指向我们扩展中的文件.
/sf/answers/620494871/
所以这......
url(images/ui-bg_flat_0_aaaaaa_40x100.png)
变得......
url(chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_0_aaaaaa_40x100.png)
并且路径不再相对而且__MSG_@@extension_id__被你的扩展名的id取代了.
此外,所有使用这种方式的图像都需要在web_accessible_resourcesmainfest 的部分声明.
所以,你的清单中的那一部分最终看起来像这样(注意我拿出你在那里的三个,他们不需要再被包括在内,因为他们现在注册了扩展)...

"web_accessible_resources": [
    "images/ui-bg_flat_75_ffffff_40x100.png","images/ui-icons_222222_256x240.png","images/ui-bg_highlight-soft_75_cccccc_1x100.png"
  ]

..我只包含了让我的测试工作所需的文件,你可能需要添加更多.检查脚本正在运行的页面上的控制台,它将告诉您需要添加哪些文件.
这是我测试中使用的同一个css文件的链接,更新的网址以这种方式工作...
https://gist.github.com/4195616