从 Chrome 扩展中的弹出 .html 文件在后台 .js 文件中运行一个函数
发布于2022-12-07 03:31 阅读(268) 评论(0) 点赞(10) 收藏(4)
我正在尝试编写一个 Chrome 扩展程序。您可以通过单击 Chrome 扩展程序图标在图标之间切换，popup.html 会显示您将通过单击将其设置为的图标的预览：
<input type="image" src="icon.png" onclick="helloWorld()"></input>
并且函数helloWorld()定义在background.js文件中（同目录：
chrome.browserAction.setIcon({
path : "/iconcat.png"
});
function helloWorld() {
chrome.browserAction.setIcon({
path : "/icon.png"
});
}
（要做的第一件事是将其设置为猫图标）
我有两个icon.png，并且iconcat.png彼此在同一个目录中，还有 .html 和 .js 文件。
如何helloWorld()通过单击图像按钮来运行 .js 文件中的函数？
解决方案
默认情况下，内联脚本不会被执行。您应该提取
onclick内联处理程序并将其移动到外部脚本，如popup.js.要从弹出页面调用后台页面中的函数，您可以查看chrome.runtime.getBackgroundPage或chrome.extension.getBackgroundPage。
示例代码如下所示：
清单.json
{
"name": "Emoji",
"version": "1.0",
"manifest_version": 2,
"description": "Show an Emoji in Chrome!.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "picker.html"
},
"background": {
"scripts": ["background.js"]
}
}
选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="inputId" type="image" src="icon.png"></input>
<script src="picker.js"></script>
</body>
</html>
选择器.js
document.getElementById("inputId").addEventListener("click", function() {
chrome.runtime.getBackgroundPage(function(backgroundPage) {
backgroundPage.helloWorld();
});
}, false);
背景.js
chrome.browserAction.setIcon({
path : "/iconcat.png"
});
function helloWorld() {
chrome.browserAction.setIcon({
path : "/icon.png"
});
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/462004/f965ee53cf3e05239806/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力