Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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）：

＆lt; script type =“text / javascript”src =“popup.js”＆gt;＆lt; / script＆gt;

从弹出窗口（或背景）向当前标签发送信息时（在您的情况下，它只会是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）

我希望这会有所帮助。

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

1 个答案: