Javascript 如何将在扩展菜单中输入的数据发送到另一个文件_Javascript_Html_Google Chrome Extension

Javascript 如何将在扩展菜单中输入的数据发送到另一个文件

javascript html google-chrome-extension

Javascript 如何将在扩展菜单中输入的数据发送到另一个文件,javascript,html,google-chrome-extension,Javascript,Html,Google Chrome Extension,我正在写一个扩展，我为它制作了一个菜单，用户在其中输入一些数据。有必要使这些数据在点击按钮（在展开菜单中）时显示出来下面是它的工作原理：background.js是扩展菜单中负责js的文件content.js是负责对站点上的DOM进行更改的文件 document.getElementById（'btn'）。onclick=function（）{ var first=document.getElementById（'first'）。值； var second=document.getEleme

我正在写一个扩展，我为它制作了一个菜单，用户在其中输入一些数据。有必要使这些数据在点击按钮（在展开菜单中）时显示出来

下面是它的工作原理：

background.js

是扩展菜单中负责js的文件

content.js

是负责对站点上的DOM进行更改的文件

document.getElementById（'btn'）。onclick=function（）{
var first=document.getElementById（'first'）。值；
var second=document.getElementById（'second'）。值；
//正在发送content.js
chrome.extension.sendMessage（'hello'）；
}

好的，这里似乎有几个n00b问题：

```
background.js
```
是在所有选项卡/页面的后台运行的脚本。（manifest.json中的“background”部分指定了这一点）。 PS：调试
```
background.js
```
的方法是打开chrome的扩展页（
```
chrome://extensions/
```
）并单击此处的“查看视图：背景页”。通常，这是大多数代码的位置
根据您的清单，
```
content.js
```
将自动插入所有
```
google.com
```
页面
```
popup.html
```
，只要弹出窗口可见，它的代码就存在。它通常非常轻，代码很少。因此，在您的
```
popup.html
```
中，删除现有的两个
条目，只需使用一个脚本（通常为popup.js）：

当从弹出窗口（或后台）向当前选项卡发送信息时（在您的情况下，仅为

google.com

），您使用常规代码：

// Get the current tab & tell it to do something
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var currentTab = tabs[0];
    var id = currentTab.id;
    chrome.tabs.sendMessage(id,
            { action: 'foo', data:... }, 
            response => { console.log('some response from content.js is:' + response); });

});

但要将消息发送到后台（从google.com内的页面或内容脚本），只需使用以下

chrome.runtime.sendMessage（{action:'foo'，data:…}）


因此，您的代码应该是：
popup.html
<head>
  <script type="text/javascript" src="popup.js"></script>
</head>
<body>...

background.js
chrome.runtime.onMessage.addListener(function(request,sender, sendResponse){
    if(request.action=='hello'){
        console.log(request.foo + ' ' request.first + ' '  + request.second);
        sendResponse('I got foo!');
    }
});

（没有）
content.js
chrome.runtime.onMessage.addListener(function(request,sender, sendResponse){
    if(request.action=='hello'){
        console.log(request.foo + ' ' request.first + ' '  + request.second);
        sendResponse('I got foo!');
    }
});

如果有什么帮助的话，我有一个小项目，我可以在这里开始webextension项目：。它有一些代码可以帮助它跨浏览器工作（Firefox、Opera和Edge）
我希望这能有所帮助。
您能添加一些详细信息，如遇到的错误问题吗，向社区展示您尝试过的内容。@abielita我更新了我的问题。请参阅其他问题。ext.tabs.sendMessage
未定义。在popup.html
中没有id为first
或second
的元素。此代码将消息发送到活动选项卡，该选项卡不一定包含内容脚本。@IvánNokonoko。很抱歉，我从其他工作代码中复制了该代码，该代码具有跨浏览器库。这个popup.html只是对头部应该包含的内容的澄清。所有代码都只是基于原始问题的演示代码，显然在复制粘贴场景中可能不起作用。此外，您还对google.com内容脚本进行了假设。“可能有多个，也可能没有——这太难说了。”伊瓦诺科诺科。此外，如果有多个google.com页面打开，那么使用“活动选项卡”方法就不会那么混乱。这样，如果当前的标签是google.com，弹出窗口可以工作，如果没有，那么它什么也不做——这对最终用户来说要容易得多。什么假设？OP希望他们的代码能够在google.com页面上运行，无论它们是否处于活动/可见状态。没关系，谢谢。但如果可以，请告诉我：我在输入（popup.html）中输入了一些值，然后我在popup.js中得到这个值并在content.js中发送。在content.js中，我对google.com的DOM做了一些更改，但在更新页面后，所有更改都消失了。如何修复它？所以，即使我重新加载页面，我也需要在某个站点的DOM中保存更改