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

我创建了一个简单的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","" ], "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。

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

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

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

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

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