Chrome扩展程序中的onClick无法正常工作

小编典典

Chrome扩展程序中的onClick无法正常工作

javascript

这似乎是最容易的事情，但它没有用。在普通的浏览器中，.html和.js文件可完美运行，但在Chrome扩展程序中，该onClick功能无法执行应有的功能。

.js文件：

function hellYeah(text) {
  document.getElementById("text-holder").innerHTML = text;
}

.html文件：

<!doctype html>
<html>
  <head>
    <title>
      Getting Started Extension's Popup
    </title>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="text-holder">
      ha
    </div>
    <br />
    <a onClick=hellYeah("xxx")>
      hyhy
    </a>
  </body>
</html>

因此，基本上，一旦用户单击“ hyhy”，“ ha”应更改为“ xxx”。再说一次-
它在浏览器中完美运行，但在扩展程序中不起作用。你知道为什么吗？以防万一我还要在下面附加manifest.json。

提前致谢！

manifest.json：

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

阅读 771

2020-04-23

共1个答案

小编典典

Chrome扩展程序不允许您使用内联JavaScript（文档）。您将必须执行与此类似的操作。

为链接分配一个ID（<a onClick=hellYeah("xxx")>变为<a id="link">），并用于addEventListener绑定事件。将以下内容放入您的popup.js文件中：

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {
        hellYeah('xxx');
    });
});

2020-04-23