Question

我创建了一个简单的Jquery脚本作为chrome扩展，假设它改变了类的字体颜色。

如果我直接在控制台中使用它，脚本工作正常。但如果我将它作为扩展名运行它不会在值高于1时触发。

有什么可能是问题的建议吗？

的script.js

 (function(){
         $("#ID-layout-1435216276773-counterValue").each(function() {
                var el = $(this);
                var value = parseFloat(el.text());
                if (value > 1) {
                    el
                        .css("font-weight", "bold")
                        .css("color", "red");

                } else {
                    el.css("font-weight", "normal");
                }
            });   

          })();

清单

{
"update_url": "https://clients2.google.com/service/update2/crx",

    "name": "Live",
    "version": "0.3",
    "description": "Live",
    "permissions": [
    "tabs","<all_urls>"
    ],
    "browser_action": {
    "default_icon": "icon.png"
    },
    "icons": { 
                "16": "icon.png",
                "48": "icon.png",
                "128": "icon_128.png" 
            },
    "content_scripts": [
        {
        "matches": [
                "https://www.google.com/analytics/web/?hl=en#dashboard/6I8yfVs_TqSQ_b1tOJYR0Q/a8398197w15972131p74378741/*"
            ],
        "run_at": "document_end" ,
        "js": ["script.js"]     
        }
    ], 
    "manifest_version":2
}

Answer 1

您实际上并未在内容脚本中包含jQuery。

因为内容脚本run in isolation from the page，页面本身是否已包含jQuery并不重要。你的脚本的上下文没有它。

但是，您的代码可以在控制台中运行，因为默认情况下，代码在页面的上下文中执行（请参阅控制台上方的<top frame>选择器？），这可能已经有了jQuery。除此之外，还有Chrome控制台provides a special version of $ to use in the console，即使没有jQuery（在这种情况下它是document.querySelector的别名）。

要查看在扩展程序的上下文中执行代码时发生了什么，您需要切换到其上下文（在注入内容后创建）。

您需要将jQuery添加到扩展程序的文件中并将其注入主脚本之前：

"content_scripts": [{
    "matches": [
       ...
    ],
    "run_at": "document_end" ,
    "js": ["jquery.min.js", "script.js"]     
}],

更改元素Chrome扩展程序的颜色

1 个答案: