Javascript Chrome扩展，通过扩展弹出窗口中的按钮更改DOM_Javascript_Jquery_Html_Dom_Google Chrome Extension

Javascript Chrome扩展，通过扩展弹出窗口中的按钮更改DOM

javascript jquery html dom google-chrome-extension

Javascript Chrome扩展，通过扩展弹出窗口中的按钮更改DOM,javascript,jquery,html,dom,google-chrome-extension,Javascript,Jquery,Html,Dom,Google Chrome Extension,我对chrome扩展开发完全陌生。当点击扩展弹出窗口中的按钮时，我试图更改DOM（将数据附加到活动网页）。这怎么可能清单文件 { "manifest_version": 2, "name": "test 2", "description": "test ext 2", "version": "1.0", "browser

我对chrome扩展开发完全陌生。当点击扩展弹出窗口中的按钮时，我试图更改DOM（将数据附加到活动网页）。这怎么可能

清单文件

{
  "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>


测试分机2
按钮

当我点击#按钮时，我想在main.js文件中执行一些jquery代码，这些代码将向活动网页添加一些数据

多谢各位

使用。您可以在popup.js中注册事件侦听器，并调用

chrome.tabs.executeScript

将一些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' });
    });
});

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

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

使用。您可以在popup.js中调用

chrome.tabs.sendMessage

，并通过content.js中的

chrome.runtime.onMessage

收听

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' });
    });
});

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

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

content.js

chrome.runtime.onMessage.addListener(function(request) {
    if(request.action === 'executeCode') {
        // YOUR CODE HERE
    }
});

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

使用。您可以在popup.js中调用

chrome.storage.local.set

，并通过

chrome.storage.onChanged

收听content.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' });
    });
});

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

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

content.js

chrome.runtime.onMessage.addListener(function(request) {
    if(request.action === 'executeCode') {
        // YOUR CODE HERE
    }
});

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

@HaibaraAi的可能复制品如果我的问题以这样的复制品结束，我不知道该怎么办。这只是解决方案的一小部分。感谢您提供的链接。这有助于获得一个想法，但现在我希望在popup.html中加入一个按钮，并添加一个监听器，它将改变活动页面的DOM。我在找这样的东西，谢谢你，海巴拉。我查了一些文件。但是我没有得到一个正确的答案，但是这个答案很有帮助，非常感谢！