主页 / 问题 / 762328
Accepted
Tick-Tack
Asked:2020-12-23 20:59:40 +0000 UTC2020-12-23 20:59:40 +0000 UTC

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

  • 772

我正在编写一个扩展程序，我为它制作了一个菜单，用户可以在其中输入一些数据。有必要通过单击按钮（在扩展菜单中）将这些相同的数据放置在我需要的页面上。 在此处输入图像描述

这是清单和 HTML：

{
  "manifest_version": 2,
  "version": "1.3",
  "description": "",
  "browser_action": {
    "default_popup": "content/popup.html"
  },
  "content_scripts": [{
    "matches": ["https://google.com/*"],
    "js": ["content/content.js"],
    "css": ["content/qq.css"],
    "run_at": "document_end"
  }]
}
<head>
  <script src="content/background.js"></script>
</head>

<body>
  <input type="text" id="text">
  <input type="button" id="btnForBalance" value="Send">
  </body

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

这是结构：
在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    从您的代码来看，您对扩展 API 的术语和用途有些困惑。

    要解决问题，您将需要：

    1. 弹出（弹出就是你所说的“扩展菜单”）
    2. 内容脚本

    在这种情况下不需要背景脚本。

    绘制了一个扩展的工作示例。

    清单.json 

    {
  "manifest_version": 2,
  "name": "Test",
  "version": "1.0",
  "description": "",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content-script.js"],
    "run_at": "document_end"
  }]
}

    popup.html 

    <html>
<head>
    <meta charset="UTF-8">
</head> 
<body>
    <input type="text" id="data">
    <button id="go">Отправить</button>

    <script src="popup.js"></script>    
</body>
</html>

    popup.js 

    const btn = document.querySelector('#go');
const input = document.querySelector('#data');

btn.addEventListener('click', function() {
    const text = input.value; 

    // Ищем активный таб в текущем окне
    chrome.tabs.query({active: true, currentWindow: true}, function(foundTabs) {

        const activeTab = foundTabs[0];

        // Отправляем сообщение в content-script находящейся в этом активном табе
        chrome.tabs.sendMessage(activeTab.id, {text: text}); 
    })
});

    内容脚本.js

    chrome.runtime.onMessage.addListener(function(request) {
    const text = request.text; // принятое сообщение из popup'а

    const input = document.querySelector('#lst-ib'); // для примера используется поле ввода Google.com
    input.value = text;
});

    这个怎么运作

    通过单击弹出窗口中的发送，首先搜索一个活动选项卡以获取 ID。此外，这个禁忌（根据接收到的id）发送一个带有输入文本的消息。
    内容脚本接收一条消息并将其插入到输入字段中。

    笔记：

    • 该指令"matches": ["<all_urls>"]在所有页面上运行内容脚本。我建议指定您需要的 URL 模式；
    • 消息不仅可以发送到活动选项卡；chrome.tabs.query方法允许您通过各种参数查找选项卡；
    • 安装扩展程序后，不要忘记重新加载您正在测试的选项卡以运行内容脚本。
    • 1

相关问题