javascript - Chrome 扩展 : Passing message by button from popup. html 到事件页面-6ren

javascript - Chrome 扩展 : Passing message by button from popup. html 到事件页面

转载作者：行者123 更新时间：2023-12-02 15:58:36

25

4

我想通过单击 popup.html 中包含的按钮从 popup.html 中打开一个新选项卡。

我的方法是从 popup.html 向 eventPage.js 发送一条消息，然后 eventPage.js 将在收到消息时打开新选项卡。

但是这不起作用。请看下面的代码:

popup.html

<!DOCTYPE html>
<html style=''>
    <head>
        <script src="popup.js"></script>
    </head>

    <body style="width:400px;">
        <div id="content">
            <div id="openTab"><button type="button" id="btnOpenTab" name="btnOpenTab" onclick="sendMessage()">Open New Tab</button></div>
        </div>
    </body>
</html>

eventPage.js

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse)
    { 
        if (request.action == "openNewTab")
            chrome.tabs.create({ url: request.url });
    }
);

popup.js

function sendMessage()
                {
                    chrome.extension.sendMessage({
                        action: "openNewTab",
                        url: "www.google.com"
                    });
                }

manifest.json

{
  "name": "Open new tab",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Opens new tab",

  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "<all_urls>"]
}

编辑:在控制台中发现一条错误消息，其中包含以下消息:

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令:“script-src 'self' chrome-extension-resource:”。启用内联执行需要“unsafe-inline”关键字、哈希值(“sha256-...”)或随机数(“nonce-...”)。

最佳答案

内容安全策略阻止您在 HTML 中使用 JavaScript(在这种情况下，您会因为 popup.html< 中的 onclick="sendMessage()" 而收到错误消息 文件。

您可以通过从按钮中删除 onclick 属性并在 popup.js 文件中添加事件监听器来获得所需的结果:

document.getElementById('btnOpenTab').onclick = sendMessage;

关于javascript - Chrome 扩展 : Passing message by button from popup. html 到事件页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31389251/

25

4

0

文章推荐： javascript - HTML:自动滚动合并表

文章推荐： javascript - 在 JavaScript 中将标签应用于多维数组中的对象

文章推荐： javascript - ReactJS 和继承

parameter-passing - vala 是 "pass by reference"还是 "pass by value"？
或者存在像这样的指针和引用C ? 我正在尝试开始使用 vala，但很高兴知道 vala 是“按引用传递”还是“按值传递” 最佳答案首先你应该明白默认的vala编译器valac编译为 C(作为一种中
parameter-passing - "pass by reference"是糟糕的设计吗？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
php - crypt($pass, '$2y$09$salt' ) === crypt($pass, crypt($pass, '$2y$09$salt' )) 在 PHP 中如何运行？
我确实对 crypt() PHP 函数感到困惑。当第二个 crypt 显然使用不同的第二个参数时，以下两个 crypt 函数如何给出相同的输出？差异盐意味着差异哈希对吗？ echo crypt("p
pass-by-reference - 方案 R5RS : pass by reference
我正在尝试在方案中模拟堆栈。我正在使用 DrScheme 并选择语言 R5RS。我需要创建 pop、push 和 peek 的函数。但我无法弄清楚如何通过引用传递。我已经阅读了一些关于盒子的信息，但是
parameter-passing - "pass-by-name"是什么？它到底是如何工作的？
我已经查过维基百科并用 google 搜索过，但我仍然无法理解 ALGOL 60 中的按名称传递的工作原理。最佳答案我在 Pass-By-Name Parameter Passing 找到了很好的
arrays - Excel VBA 编程与数组 : To Pass them or Not To Pass them?
问题:我想知道在 Excel 2003 VBA 中处理数组的最佳解决方案是什么背景:我在 Excel 2003 中有一个超过 5000 行的宏。我在过去 2 年中构建了它，将新功能添加为新过程，这有
Java数组:Java pass by reference and pass by value?
我正在尝试反转位图数组，而不修改源数组。但问题是源数组也被颠倒了。我做错了什么还是我应该以其他方式做？感谢您的帮助。 private GalleryAdapter galleryAdapter; pr
java - Java中 'pass by reference'/'pass by value'变量赋值的规则是什么？
因此，关于按引用传递/按值传递，方法如何处理参数传递已有详细记录，但是变量赋值又如何呢？例如，我刚刚编写了一些如下所示的代码: TreeNode parent = null; TreeNode cu
Python 脚本利用 pass 进行异常处理，pass 似乎无法正常运行
我正在编写一个脚本，它将从我们的星号系统中回填调用详细记录到我们的 MySQL 日志数据库中。在下面的代码中，我试图忽略重复键并继续到下一行，但是当这段代码执行时，我所看到的只是第一行欺骗警告，然后脚
parameter-passing - Symfony : pass parameter between actions (with a redirect)
我从一个 Action (executeProcess)重定向到另一个(executeIndex)。我希望能够不使用GET传递参数/变量(例如$this->redirect('index', arra
oop - 设计问题 : pass the fields you use or pass the object?
我经常看到方法接口(interface)的两种相互冲突的策略，大致概括如下: // Form 1: Pass in an object. double calculateTaxesOwed(TaxFo
javascript - JavaScript 回调中术语 "pass"或 "passing"some 是什么意思？
目前正在学习回调在 JavaScript 中的含义，我正在努力理解回调是如何工作的，以及术语“passing this”或“passing that”的来源以及它如何与回调一起工作？我想展示一些示例代
parameter-passing - 甲骨文顶点 : Accessing params passed through URL
我通过 URL 传递参数并且页面被正确重定向。如何访问下一个(重定向的)页面上(从上一页)传递并在 URL 中可用的参数？谁能告诉我该怎么做？或者有没有其他的方式在页面之间传递参数？是否有类似 A
parameter-passing - 甲骨文顶点 : Accessing params passed through URL
我通过 URL 传递参数并且页面被正确重定向。如何访问下一个(重定向的)页面上(从上一页)传递并在 URL 中可用的参数？谁能告诉我该怎么做？或者有没有其他的方式在页面之间传递参数？是否有类似 A
python - 参数 : passed by reference vs passed by name
按引用传递和按名称传递的参数传递模式有什么区别这里是 Python 中的一个示例，但假设我们不使用任何 Python 规则: def P(x,y) global i y=1 prin
c++ - 你能从 LLVM pass 调用 pass 吗？
我正在编写自己的 LLVM pass，它修改了 LLVM 位码。在生成位码时，我想禁用函数内联，但是当我完成对位码的修改后，我想调用执行函数内联的传递。这个可以吗。如果是，如何？为了更好地理解我在说
c++ - 模板函数 : mixing pass-by-copy & pass-by-reference
我有一个模板函数，负责将模板值写入流。它看起来像这样: template void Write( T value, std::ostream& stream, endianness_t endian
c++ - 如何从 LLVM pass 执行 yosys passes？
我一直在使用两个程序 llvm 的 opt 和 clifford wolf 的 yosys两者都有类似的通行证接口(interface)。(他们使用共享库作为优化 passes ) 我想根据我的 ll
java - Pass by value vs Pass by reference(两者在内存空间分配上的区别)
在我们使用引用传递的 C++ 中，我们引用了我们从参数传递给函数参数的地址，它本质上是一个指针，对吗？因此，虽然它们本质上是相同的东西，别名和所有，但指针不也需要内存空间吗？因此，无论我们在参数函数中
C++ 64 位整数 : pass by reference or pass by value
这是一个关于 64 位整数的效率问题。假设我不需要修改“int”参数的值，我应该通过值还是引用传递它。假设是 32 位机: 1) 32 位 int:我猜答案是“按值传递”，因为“按引用传递”会产生额

首页

博学

6Ren·AI

商城

javascript - Chrome 扩展 : Passing message by button from popup. html 到事件页面