个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个 chrome 扩展程序，可以将 js 文件注入(inject)网页。在浏览器中单击时还会打开一个弹出窗口。在弹出窗口中有一个按钮应该更改 js 文件中的变量。但是注入(inject)的文件通常无法与扩展的其余部分通信。我该如何更改？
我对 chrome 扩展还是有点陌生，谢谢你的帮助。
编辑:这是我目前所拥有的
list 文件:
{
"manifest_version": 2,
"name": "Minds Color Extension",
"version": "1",
"content_scripts": [
{
"matches": ["https://www.minds.com/*"],
"js": ["injectedjs.js"],
"css" : ["injectedcss.css"]
}
],
"browser_action": {
"default_icon": {
"19": "icon.png",
"38": "icon.png"
},
"default_title": "Minds Notification page",
"default_popup": "popup.html"
}
}
Popup.html
<!--
<!doctype html>
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Minds Theme Extension</title>
<style>
html, body {
margin:0;
padding:10;
width: 250px;
}
#blue {
background-color: #337dff;
}
#orange {
background-color: #ff5733;
}
#dark {
background-color: #4a505b;
}
button {
border: none;
color: white;
padding: 10px 27px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#footer {
position: fixed;
bottom: 0;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
<script src="injectedjs.js"></script>
</head>
<body>
<div id="status">
<h2> Pick a theme: </h2>
<a href="blue.html"><button type="button" id="blue" onclick="activeBlue(); run();">Blue</button></a>
<a href="orange.html"><button type="button" id="orange" onclick="activeOrange(); run();">Orange</button></a>
<a href="dark.html"><button type="button" id="dark" onclick="activeDark(); run();">Dark</button></a>
<br />
<div id="footer">
<font size="1"> <a href="mailto:?Subject=Minds%20Support" target="_top">Contact us</a></font>
</div>
</div>
</body>
</html>
注入(inject)js.js
// Var block
var blue = 0;
var orange = 0;
var dark = 0;
// Activation block
function activeBlue() {
blue = 1;
}
function activeOrange() {
orange = 1;
}
function activeDark() {
dark = 1;
}
// Resets var block
function reset() {
blue = 0;
orange = 0;
dark = 0;
}
//Changes Minds css (Runs theme)
function run() {
if (blue == 1) {
// Runs code that will change minds to blue.
document.getElementById("mdl-color--white").className = "mdl-color--blue";
}
if (orange == 1) {
// Runs code that will change minds to orange
document.getElementById("mdl-color--white").className = "mdl-color--orange";
}
if (dark == 1) {
// Runs code that will change minds to dark
document.getElementById("mdl-color--white").className = "mdl-color--grey";
}
}
Injectedcss.css 中没有任何内容。如果您需要其他文件，例如 dark.html，我可以将它们提供给您，但我不明白您为什么需要它们。
最佳答案
要了解的重要一点是，注入(inject)的脚本与网页交互，但与弹出窗口(或背景)中发生的事情是分开的。因此，虽然您将 injected.js 列为内容脚本并由 popup.html 加载，但它们实际上最终作为两个单独的文件结束。
所以第一步是创建一个 popup.js。它需要附加点击监听器(“onclick”算作不分离 javascript 和 html)并使用 message passing告诉内容脚本要做什么。 (我也稍微巩固了你的逻辑。)
["blue","orange","grey"].forEach(addListenerFor);
function addListenerFor(color) {
document.getElementById(color)
.addEventListener(click,turnPage.bind(undefined,color);
}
function turnPage(color) {
chrome.tabs.query({"active": true, "currentWindow": true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {"newClass": "mdl-color--"+color});
});
}
在内容脚本中，我们需要监听消息并采取适当的行动:
chrome.runtime.onMessage.addListener(changeClass);
function changeClass(message) {
reset();
if ( message.newClass ) {
document.getElementById("mdl-color--white").className = message.newClass;
}
}
一些最后的想法:
manifest.conent_scripts 条目中删除 css 键。getElementById 在 popup.js 中工作，您需要在元素出现后运行脚本。您可以将所有内容放入onload 调用中，但将script 标记移动到body 之前可能更容易关闭。关于javascript - 如何让 chrome 扩展按钮与注入(inject)的 js 通信？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37622345/
26
4
0
我已阅读有关依赖注入(inject)的信息。然后来了 构造函数注入(inject)， setter/getter 注入(inject) 二传手注入(inject) 接口(interface)注入(in
我正在研究依赖注入(inject)模式。我看过很多例子，其中一个典型的例子是使用 XxxService/XxxRepository 作为例子。但是在我看来，按照UML的概念，类XxxRepositor
我开始使用 Google Guice。 我有一个简单的问题: javax.inject 的 @Inject 注释和 com.google.inject 的 有什么区别@Inject 一个 ? 谢谢。
当使用构造函数注入(inject)工厂方法时，依赖的属性不会得到解析。但是，如果在解析依赖的组件之前解析了工厂方法，则一切都会按预期工作。此外，当仅使用属性注入(inject)或构造函数注入(inje
我有这样的事情: class Root { public Root(IDependency dep) {} } class Dependency:IDependency { p
听完Clean Code Talks ，我开始明白我们应该使用工厂来组合对象。因此，例如，如果 House有一个 Door和 Door有一个 DoorKnob , 在 HouseFactory我们创建
情况:我需要在一些 FooClass 中进行惰性依赖实例化，所以我通过 Injector类作为构造函数参数。 private final Injector m_injector; public Foo
在编写代码时，我们应该能够识别两大类对象: 注入(inject)剂 新品 http://www.loosecouplings.com/2011/01/how-to-write-testable-cod
这个问题是关于 Unity Container 的，但我想它适用于任何依赖容器。 我有两个具有循环依赖关系的类: class FirstClass { [Dependency] pub
如果我有 10 个依赖项我需要注入(inject)并且不想在构造函数中有 10 个参数，我应该使用哪种注入(inject)模式？ public class SomeClass { privat
我在使用 Angular2 DI 时遇到了问题。我尝试将一个类注入(inject)另一个类，它引发了以下错误: 留言:"Cannot resolve all parameters for 'Produ
对依赖注入(inject)还很陌生，我想弄清楚这是否是一种反模式。 假设我有 3 个程序集: Foo.Shared - this has all the interfaces Foo.Users -
我正在尝试了解 Angular 14 的变化，尤其是 inject()我可以将模块注入(inject)功能的功能，我不需要为此创建特殊服务..但我想我弄错了。 我正在尝试创建一些静态函数来使用包 ng
希望这个问题不是太愚蠢，我试图掌握更高级的编程原理，因此试图习惯使用 Ninject 进行依赖注入(inject)。 因此，我的模型分为几个不同的 .dll 项目。一个项目定义了模型规范(接口(int
我最近一直在大量使用依赖注入(inject)、测试驱动开发和单元测试，并且开始喜欢上它。 我在类中使用构造函数依赖，这样我就可以为单元测试注入(inject)模拟依赖。 但是，当您实际需要生产环境中的
我有下面的代码来使用 Guice 进行依赖注入(inject)。第一个是使用构造函数注入(inject)，而另一个是直接在字段上方添加 @Inject。这两种方式有什么区别吗？ Guice官网似乎推荐
这个问题在这里已经有了答案: Angular2 Beta dependency injection (3 个答案) 关闭 7 年前。 我正在使用 angular2 测试版。并在使用 @Inject
有没有可能做这样的事情？ (因为我尝试过，但没有成功): @Injectable() class A { constructor(private http: Http){ // <-- Injec
我很恼火必须通过 Constructor 传递管道对象，因为我想为业务实体或要传递的值保留构造函数参数。 所以我想通过 setter ，但只要这些 setter 没有被填充，我的包含依赖项的对象就不应
假设我有这个: SomePage.razor: @inject Something something @page "/somepage" My Page @code { // Using
我是一名优秀的程序员,十分优秀！