在内容脚本中使用jquery的Chrome扩展在创建对话窗口时解析错误 [英] Chrome extention using jquery in content script resolve error when creating dialog window

问题描述

我试着在我的Chrome扩展中使用jQuery和jQuery-UI。
每次创建新选项卡时，我都会尝试在内容脚本对话框中创建，但我不断收到：

 属性对象窗口的'$'不是函数
  

我想我做错了什么加载脚本。这是我的：

  {
name：Sample，
description： 这是一个样本，
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>，
选项卡

} 
  

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）; 
}; 
 
尝试{
 
（document.head || document.documentElement）.appendChild（ss）; 
（document.head || document.documentElement）.appendChild（ss_ui）; 
（document.head || document.documentElement）.appendChild（s）; 
 
} catch（e）{
 console.log（appendChild中的异常）; 
} 
  

client.js（其中I创建对话框）

  try {
 console.log（开始创建tabel）; 
 
 var layerNode = document.createElement（'div'）; 
 layerNode.setAttribute（'id'，'dialog'）; 
 layerNode.setAttribute（'title'，'基本对话框'）; 
 var pNode = document.createElement（'p'）; 
 pNode.innerHTML =这是默认的对话框，可用于显示信息。对话窗口可以移动，调整大小并用'x'图标关闭。 
 
 layerNode.appendChild（pNode）; 
 document.body.appendChild（layerNode）; 
 
 
 jq162 = jQuery.noConflict（true）; 
（function（$）{
 $（document）.ready（function（）{
 $（＃dialog）.dialog（）; 
}）; 
}）（jq162）; 
 
 $ b catch（e）{
 console.log（appendChild中的页面异常中的脚本+ e）; 
 // alert（e）; 
} 
  

当我在控制台中看到打印命令时， / p>

 开始创建tabel client.js：2 
 appendChildTypeError中的页面异常脚本：无法调用方法'dialog' null client.js：26 
 client.js已加载chrome-extension：//mmoccjinakdjcmhjdjghhjnihbfkkgkp/myscript.js：24 
 jquery-1.8.3.min.js加载的chrome-extension：// mmoccjinakdjcmhjdjghjjhhhhhfhkfkkgkp / myscript .js：6 
 jquery-ui.js加载
  

我在这里做错了什么？

解决方案

常见的discalimer，我没有真正做过JQuery ......但是我看到了一个明显的代码问题，它是一个镜头......

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

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

我不确定从css文件中引用扩展目录中包含的图形文件的最佳方式，因此我只将所有图形转换为dataurl并将它们放入在css文件中。您可以使用像这样的工具...

http://dataurl.net/# dataurlmaker

...完成此操作。

现在我们有一个很好看的对话框。

manifest.json
$ b

  { 
name：JQery UI Dialog，
description：https://stackoverflow.com/questions/13669762/chrome-extention-using-jquery-in-content-script-resolve -  
manifest_version：2，
版本：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
]，
权限：[
unlimitedStorage，
http：// * /，
< all_urls>，
标签
] 
 
  

jquery-ui-base64.css

https：// g ist.github.com/4193693

认为放在这里可能有点大。

client.js $ b

 尝试{
 console.log（开始创建tabel）; 
 
 var layerNode = document.createElement（'div'）; 
 layerNode.setAttribute（'id'，'dialog'）; 
 layerNode.setAttribute（'title'，'基本对话框'）; 
 var pNode = document.createElement（'p'）; 
 pNode.innerHTML =这是默认的对话框，可用于显示信息。对话窗口可以移动，调整大小并用'x'图标关闭。 
 
 layerNode.appendChild（pNode）; 
 document.body.appendChild（layerNode）; 
 
 
 jq162 = jQuery.noConflict（true）; 
（function（$）{
 $（document）.ready（function（）{
 $（＃dialog）。dialog（）; 
}）; 
}）（jq162）; 
 
 
 $ b} catch（e）{
 console.log（appendChild中的页面异常中的脚本+ e）; 
 // alert（e）; 
 
  

编辑

使用chromes i18n的支持，我们可以改变图片的网址，以便它们指向我们的扩展中的文件。

https://stackoverflow.com/a/8864212/189093

所以这... ...
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。

此外，所有以这种方式使用的图像需要在mainfest的 web_accessible_resources 部分声明。

因此，你的清单中的那部分最终会看起来像这样（注意我拿出了你在那里的那三个，他们不需要再被包含，因为它们现在被扩展注入）...

 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文件的链接，更新后的Url以这种方式工作。 ..

https://gist.github.com/4195616 p>

I try to use jQuery and jQuery-UI in my Chrome extension. I try to create in the content script dialog window each time new tab is created but I keep getting:

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

I guess I'm doing something wrong loading the scripts. Here's what I have:

{
"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 ( the content script ):

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 ( where I create the dialog )

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

when I see in the console to see the order of prints im getting :

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   

What am I doing wrong here?

解决方案

Usual discalimer, I don't really do JQuery...but I saw an obvious problem with your code and so gave it a shot...

Get rid of client.js, its no longer needed after you added the files it injects to the content script part of the manifest. After you added them to the manifest Chrome will now inject them for you. Once you do this it starts to half work.

After that I noticed that the dialog came up but had no graphics/styling so you need to add the css file to the content script part of the manifest to get injected. Now there's some style, but the console was saying it couldn't get at the graphic files needed for the style.

Im not sure what the best way is to reference a graphic file thats contained in the extensions directory from a css file so I just turned all the graphics into dataurl's and put them in the css file. You can use a tool like this one...
http://dataurl.net/#dataurlmaker
...to get that done.
Now we have a nice looking dialog.

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
Thought it might be a little to big to put here.

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

EDIT
Using chromes i18n support we can change the urls for the images in the css so they point to the files in our extension.
https://stackoverflow.com/a/8864212/189093
So this...
url(images/ui-bg_flat_0_aaaaaa_40x100.png)
...becomes...
url(chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_0_aaaaaa_40x100.png)
and the path isnt relative anymore and the __MSG_@@extension_id__ gets replaced with the id of your extension.
Also, all the images used this way need to be declared in the web_accessible_resources part of your mainfest.
So, that part in your manifest ends up looking like this (notice I took out the three you had there, they dont need to be included anymore as their injected by the extension now)...

"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"
  ]

..Ive only included the files I needed to get my test working, you may need to add more. Check the console on the page the script is running and it will tell you what files you need to add.
Here's a link to the same css file used in my test with the urls updated to work this way...
https://gist.github.com/4195616

这篇关于在内容脚本中使用jquery的Chrome扩展在创建对话窗口时解析错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！