onclick 或内联脚本在扩展中不起作用 [英] onclick or inline script isn't working in extension

查看：32 发布时间：2021/11/30 22:13:55 javascript google-chrome-extension onclick firefox-addon-webextensions

本文介绍了onclick 或内联脚本在扩展中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这似乎是最容易做的事情，但就是行不通.在普通浏览器中，.html 和 .js 文件可以完美运行，但在 Chrome/Firefox 扩展中，onClick 函数没有执行它应该做的事情.

.js 文件:

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

.html 文件:

<头><标题>入门扩展的弹出窗口<script src="popup.js"></script><身体><div id="text-holder">哈

<br/><a onClick=hellYeah(xxx")>嘿嘿</a>

所以基本上一旦用户点击hyhy"，ha"应该变成xxx".再次 - 它在浏览器中完美运行，但在扩展中不起作用.你知道为什么吗?以防万一我也在下面附上 manifest.json.

manifest.json:

{名称":我的第一个扩展"，版本":1.0"，manifest_version":2，描述":我做的第一个扩展."，浏览器动作":{default_icon":icon.png"，default_popup":popup.html"},权限":[http://api.flickr.com/"]}

解决方案

Chrome 扩展不允许您使用内联 JavaScript (文档).
Firefox WebExtensions 也是如此(文档).

你将不得不做类似的事情:

为链接分配一个 ID( 变成 )，并使用 addEventListener绑定事件.将以下内容放入您的 popup.js 文件中:

document.addEventListener('DOMContentLoaded', function() {var link = document.getElementById('link');//onClick 的逻辑如下:link.addEventListener('click', function() {地狱耶('xxx');});});

popup.js 应该作为单独的脚本文件加载:

This seems to be the easiest thing to do, but it's just not working. In a normal browser the .html and .js files works perfectly, but in the Chrome/Firefox extension the onClick function is not performing what it's supposed to do.

.js file:

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

.html file:

<!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>

So basically once the user clicks "hyhy", "ha" should change into "xxx". And again - it works perfectly in the browser but does not work in the extension. Do you know why? Just in case I'm attaching the manifest.json below as well.

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/"
  ]
}

解决方案

Chrome Extensions don't allow you to have inline JavaScript (documentation).
The same goes for Firefox WebExtensions (documentation).

You are going to have to do something similar to this:

Assign an ID to the link (<a onClick=hellYeah("xxx")> becomes <a id="link">), and use addEventListener to bind the event. Put the following in your popup.js file:

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

popup.js should be loaded as a separate script file:

<script src="popup.js"></script>

这篇关于onclick 或内联脚本在扩展中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

onclick 或内联脚本在扩展中不起作用 [英] onclick or inline script isn't working in extension

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

onclick 或内联脚本在扩展中不起作用 [英] onclick or inline script isn&#39;t working in extension

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

onclick 或内联脚本在扩展中不起作用 [英] onclick or inline script isn't working in extension

登录关闭