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

Question

我正在写一个扩展，我为它做了一个菜单，用户输入了一些数据。有必要使点击按钮（在扩展菜单中）这些数据。

以下是它必须如何工作：background.js是扩展菜单中负责js的文件。 content.js是负责在站点上更改DOM的文件。

document.getElementById('btn').onclick = function() {
  var first = document.getElementById('first').value;
  var second = document.getElementById('second').value;
  //sending in content.js
  chrome.extension.sendMessage('hello');
}

<head>
  <script type="text/javascript" src="content.js"></script>
  <script type="text/javascript" src="background.js"></script>
</head>
<input type="text" id="first">
<input type="text" id="second">
<input type="button" id="btn" value="send">

content.js获取数据：

chrome.extension.onMessage.addListener(function(request){
    if(request=='hello'){
        console.log('1. Get: ', request);
    }
});

但是从background.js我什么都没得到。

这是manifest.json

{

 "manifest_version": 2,
 "version": "1.3",
 "description": "name",
 "browser_action":{
    "default_popup": "content/popup.html"
 },
     "background": {
     "persistent": false,
         "scripts": ["content/background.js"]
        },
      "content_scripts": [
          {
             "matches": [ "https://google.com/*" ],
             "js": ["content/content.js"],
             "css": ["content/qq.css"],
             "run_at": "document_end"
         }
     ]
 }

事实证明，我需要使用按钮send将输入的数据发送到一个文件，该文件将把这些数据插入到我需要的页面中。怎么做？帮助，因为如果我把它在我的js文件中执行的代码，那么它会尝试从页面上的input获取此数据，而不是从扩展菜单中获取。

这是结构：

Answer 1

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

background.js是一个在所有选项卡/页面的背景中运行的脚本。（manifest.json中的“背景”部分指定了这一点）。 PS：调试background.js的方法是打开chrome的扩展页面（chrome://extensions/），然后点击“Inspect Views：background page”。通常，这是您的大多数代码所在的位置。
根据您的清单，content.js将自动插入所有google.com页面。
只要弹出窗口可见，popup.html和它的代码才存在。它通常很轻，代码很少。所以，在你的popup.html中，删除你现有的两个<script>条目，并使用一个脚本（通常是popup.js）： <script type =“text / javascript”src =“popup.js”> </ script>
从弹出窗口（或背景）发送信息到当前选项卡（在您的情况下，它将只是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>...

popup.js：

document.getElementById('btn').onclick = function() {
  var first = document.getElementById('first').value;
  var second = document.getElementById('second').value;
  //sending in content.js
  var foo_data="I am foo";

    // 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: 'hello', foo:foo_data, first:first, second:second }, 
                response => { console.log(response); });

    });

}

background.js

（没有）

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项目：https://github.com/cmroanirgo/webextension-template。它有一些代码可以帮助它跨浏览器工作（Firefox，Opera和Edge）

我希望这有帮助。

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

问题描述投票：3回答：1

1个回答

最新问题

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

问题描述 投票：3回答：1

1个回答

最新问题

问题描述投票：3回答：1