Question

我正在尝试编写Chrome扩展程序。您可以通过点击Chrome扩展程序图标在图标之间切换，然后popup.html会显示您要将其设置为的图标的预览：

with open('f.txt') as f:
    next(f)
    data = list(map(int, f))

函数<input type="image" src="icon.png" onclick="helloWorld()"></input>在background.js文件中定义（同一目录：

helloWorld()

（正在做的第一件事是将其设置为猫图标）

我同时拥有chrome.browserAction.setIcon({ path : "/iconcat.png" }); function helloWorld() { chrome.browserAction.setIcon({ path : "/icon.png" }); }和icon.png目录，以及.html和.js文件。

如何通过单击图像按钮来运行.js文件中的iconcat.png功能？

Answer 1

By default，内联脚本不会被执行。您应该提取onclick内联处理程序并将其移至外部脚本，如popup.js。
要从弹出页面调用后台页面中的功能，您可以查看chrome.runtime.getBackgroundPage或chrome.extension.getBackgroundPage。

示例代码如下：

的manifest.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"]
  }
}

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

background.js

chrome.browserAction.setIcon({
  path : "/iconcat.png"
});

function helloWorld() {
    chrome.browserAction.setIcon({
      path : "/icon.png"
    });
}

在Chrome扩展程序中的弹出.html文件中运行后台.js文件中的函数

1 个答案: