改变元素Chrome扩展程序的颜色 [英] change color of element Chrome extension

问题描述

我已经创建了一个简单的JQuery脚本作为扩展名，用于改变类的字体颜色。

如果我使用脚本，脚本工作正常直接在控制台中。但是如果我将它作为扩展运行，它不会在值高于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
}，
图标：{
16 ：icon.png，
48：icon.png，
128：icon_128.png
}，
content_scripts：[
 {
匹配：[
https://www.google.com/analytics/web/?hl=zh-CN#dashboard/6I8yfVs_TqSQ_b1tOJYR0Q/a8398197w15972131p74378741/*
] ，
run_at：document_end，
js：[script.js] 
} 
]，
manifest_version：2 
 
  

解决方案

内容脚本。

因为内容脚本独立于页面运行，页面本身是否包含jQuery并不重要。您的脚本的上下文没有它。

然而，您的代码是从控制台运行的，因为代码默认情况下会在页面的上下文中执行（请参阅< top frame> 选择器在控制台之上？），它可能已经有了jQuery。除此之外，Chrome控制台提供了特殊版本的 $ 在控制台中使用，即使没有jQuery（在这种情况下，它是 document.querySelector 的别名）。

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

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

 content_scripts：[{
matches：[
 ... 
]，
run_at：document_end，
js： [jquery.min.js，script.js] 
}]，
  

I have created a simple Jquery script as an chrome extension that are suppose to change the font color of a class.

the script is working fine if I use it directly in the console. but if I run it as an extension It wont trigger when the value is higher than one.

Any suggestion of what could be the problem?

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

          })();

Manifest

{
"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
}

解决方案

You have not actually included jQuery in your content script.

Because content scripts run in isolation from the page, it does not matter whether the page itself has jQuery already included. Your script's context does not have it.

However, your code works from the console, because the code is, by default, executed in the page's context (see that <top frame> selector above the console?), which may have jQuery already. Add to that the fact that Chrome console provides a special version of $ to use in the console, even if there is no jQuery (in which case it's an alias for document.querySelector).

To see what's happening if you execute the code in the extension's context, you need to switch to its context (which is created after you inject something).

You need to add jQuery to your extension's files and inject it before your main script:

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

这篇关于改变元素Chrome扩展程序的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！