gpt4 book ai didi

javascript - Chrome 扩展程序可通过扩展程序弹出窗口中的按钮更改 DOM

转载 作者:行者123 更新时间:2023-11-28 15:06:51 25 4
gpt4 key购买 nike

我对 Chrome 扩展开发完全陌生。当单击扩展弹出窗口中的按钮时,我试图更改 DOM(将数据附加到事件网页)。这怎么可能。

list 文件

{
"manifest_version": 2,

"name": "test 2",
"description": "test ext 2",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["jquery.min.js", "main.js"]
}
],
"permissions": [
"activeTab"
]
}

假设 popup.html 文件是

<!doctype html>
<html>
<head>
<title>test extension 2</title>
<script src="popup.js"></script>
</head>
<body>
<a id="button">button</a>
</body>
</html>

当我点击#button时,我想在main.js文件中执行一些jquery代码,这会将一些数据附加到事件网页。

谢谢。

最佳答案

  1. 使用Programmatic injection 。您可以在 popup.js 中注册事件监听器并调用 chrome.tabs.executeScript 向当前事件选项卡注入(inject)一些 js 代码/文件。这需要主机权限。

    popup.js

    document.getElementById('button').addEventListener('click', function() {
    chrome.tabs.query({ active: true, currentWindow: true}, function(activeTabs) {
    // WAY 1
    chrome.tabs.executeScript(activeTabs[0].id, { code: 'YOUR CODE HERE' });
    });
    });
  2. 使用Message Passing 。您可以在 popup.js 中调用 chrome.tabs.sendMessage 并通过 content.js 中的 chrome.runtime.onMessage 监听该消息。

    popup.js

    // WAY 2 (Replace WAY1 with following line)
    chrome.tabs.sendMessage(activeTabs[0].id, { action: 'executeCode' });

    内容.js

    chrome.runtime.onMessage.addListener(function(request) {
    if(request.action === 'executeCode') {
    // YOUR CODE HERE
    }
    });
  3. 使用Storage 。您可以在popup.js中调用chrome.storage.local.set,并通过chrome.storage.onChanged监听content.js中的存储变化。

    popup.js

    // WAY 3 (Replace WAY1 with following line)
    chrome.storage.local.set({ action: 'executeCode' });

    内容.js

    chrome.storage.onChanged.addListener(function(changes) {
    var action = changes['action'];
    if(action.newValue === 'executeCode') {
    // YOUR CODE HERE
    }
    });

关于javascript - Chrome 扩展程序可通过扩展程序弹出窗口中的按钮更改 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38561136/

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