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

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

转载作者：可可西里更新时间：2023-11-01 13:44:19

我正在编写一个扩展程序，我为它制作了一个菜单，用户可以在其中输入一些数据。有必要点击按钮(在扩展菜单中)这些数据。

这是它必须如何工作的: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 中获取此数据，而不是从扩展菜单中获取。

结构如下:

最佳答案

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

background.js是一个在后台运行的脚本所有选项卡/页面。 (manifest.json 中的“背景”部分指定了这一点)。PS:调试方式background.js是打开 chrome 的扩展页面(chrome://extensions/)并从那里单击“检查 View :背景页面”。通常，这是您的大部分代码所在的位置。
content.js将自动插入所有 google.com页面，根据您的 list 。
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)工作

希望对您有所帮助。

关于javascript - 如何将在扩展菜单中输入的数据发送到另一个文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47953160/