[英]How to have chrome extension button communicate with injected js?
我有一个 chrome 扩展,可以将 js 文件注入网页。 在浏览器中单击时还会打开一个弹出窗口。 在弹出窗口中,有一个按钮可以更改 js 文件中的变量。 但是注入的文件通常无法与扩展名的其余部分通信。 我如何改变这个?
我对 chrome 扩展还是有点陌生,谢谢你的帮助。
编辑:这是我到目前为止
清单文件:
{
"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"
}
}
弹窗.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>
注入的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.js 列为内容脚本并由 popup.html 加载时,它们实际上最终会成为两个单独的文件。
所以第一步是创建一个 popup.js。 它需要附加点击侦听器(“onclick”算作没有将 javascript 和 html 分开)并使用消息传递来告诉内容脚本要做什么。 (我也稍微巩固了你的逻辑。)
["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
调用中,但在body
关闭之前将script
标记移动到可能更容易。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.