gpt4 book ai didi

javascript - 从 Chrome 扩展中的弹出 .html 文件运行后台 .js 文件中的函数

转载 作者:行者123 更新时间:2023-12-02 14:38:02 25 4
gpt4 key购买 nike

我正在尝试编写一个 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.pngiconcat.png 彼此以及 .html 和 .js 文件都位于同一目录中。

如何通过单击图像按钮来运行 .js 文件中的 helloWorld() 函数?

最佳答案

  1. By default ,内联脚本将不会被执行。您应该提取 onclick 内联处理程序并将其移至 popup.js 等外部脚本。

  2. 要从弹出页面调用后台页面中的函数,您可以查看 chrome.runtime.getBackgroundPagechrome.extension.getBackgroundPage .

示例代码如下:

list .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>

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

关于javascript - 从 Chrome 扩展中的弹出 .html 文件运行后台 .js 文件中的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37265475/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com