使用 Chrome 扩展操作 DOM

Posted 2023-05-09

【中文标题】使用 Chrome 扩展操作 DOM

【英文标题】：Manipulation DOM with Chrome Extension

【发布时间】：2018-06-13 15:28:21

【问题描述】：

在带有弹出窗口的 Chrome 扩展程序中，我想打开一定数量的选项卡，加载后我想用变量操作 DOM。

我可以打开标签，但找不到将数据发送到标签的方法。

或许更好的办法是用POST方法打开Url，直接发送数据？

popup.js

$(document).ready(function () 
    "use strict";
    $('button').on('click', function () 
        chrome.tabs.create( windowId: window.id, url: "http://www.url1.com" 
        // manipulate the dom/form data with 2 variables, which are given
        // var1 = xxx and var2 = yyy
        chrome.tabs.create( windowId: window.id, url: "http://www.url2.com" 
        // manipulate the dom/form data with 2 variables, which are given
        // var3 = 123 and var4 = 678

    );
);

【问题讨论】：

你应该使用content script。

【参考方案1】：

请使用 postMessage CHROME API 在任何以下脚本之间发送或接收数据。

background.js content_script.js popup.js

详情请参考以下文档。

https://developer.chrome.com/extensions/messaging