使用 chrome 扩展中的消息传递处理 keyup 事件答案

【问题标题】：Handling keyup event with message passing in chrome extension使用 chrome 扩展中的消息传递处理 keyup 事件
【发布时间】：2017-11-29 01:08:19
【问题描述】：

我是 chrome 扩展开发的新手。我正在尝试创建一个由文本字段和按钮组成的扩展。如果用户在 text-field 中输入一些文本，那么应该会自动输入 HTML 页面的 login-id 字段。

这是我的文件..

Popup.html

<!doctype html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key  
with
value "popup.html".
-->
<html>
  <head>
    <title>Email Extension</title>
    <script type="text/javascript" src="popup.js"></script>
  </head>

  <body>
  <center>
       Enter email id:
       <br>
       <br>
       <input type="text" id="txtEmail">
       <br>
       <br>
       <input type="button" id="btnClear" value=" Clear ">
    </center>
 </body>
</html>

Popup.js

 document.addEventListener('DOMContentLoaded', function() {
    var btnElement = document.getElementById("btnClear");
    var txtElement = document.getElementById("txtEmail");
    // onClick's logic below:
    btnElement.addEventListener('click', function() {
        clearField();
    });

    txtElement.addEventListener('keyup', function() {
        changeEmail();
    });

    function clearField() {
        txtElement.value = "";
    }

    function changeEmail() {
        var emailId = txtElement.value;
        chrome.runtime.sendMessage({msg:emailId}, function(response) {
            console.log("written");
        });
    }
});

manifest.json

{
  "manifest_version": 2,

  "name": "Email Extension",
  "description": "This extension allows the user to enter Email id for login.",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Click to Enter user id"
  },

  "permissions": [
    "activeTab",
    "storage"
  ],

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["myscript.js"]
    }
  ]
}

myscript.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse){
        var email = document.getElementById("login_username");
        email.value = request.msg;
        console.log(request);
        console.log(sender);
        console.log(email.value);
    }
);

它只是在控制台上显示“写入”。在控制台不显示请求、发件人内容，也不在login_username中输入任何内容

谁能帮我弄清楚我哪里出错了？

【问题讨论】：

您似乎没有 ID 为 login_username 的元素。此外，您不能使用插件来更改用户登录系统时必须输入的信息。您需要更新服务器上的实际登录过程来处理它。
@Obsidian，让我们考虑 login_username 在某些网页上可用，因为此扩展适用于任何页面。我在那里工作的页面也存在。
只是一个临时的想法。您知道您需要查看弹出消息的控制台不是来自 myscript.js 的消息将出现的位置，您需要检查网页以查看这些信息 - 以防万一。
您无法使用chrome.runtime.sendMessage 向内容脚本发送消息。您必须使用 chrome.tabs.sendMessage 和运行内容脚本的选项卡的 ID。

标签： javascript google-chrome google-chrome-extension event-handling message-passing

【解决方案1】：

您不能使用chrome.runtime.sendMessage 向内容脚本发送消息。您必须将chrome.tabs.sendMessage 与运行内容脚本的选项卡的ID 一起使用。例如，要将其发送到当前活动的选项卡，您可以使用以下内容：

function changeEmail(){
    var emailId = txtElement.value;
    chrome.tabs.query({active:true,currentWindow:true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id,{msg:emailId}, function(response) {
            console.log("written");
        });
    });
}

【讨论】：

"带有运行内容脚本的选项卡的 id" 我的问题是，默认情况下内容脚本应该在当前页面运行吗？
根据您的清单，您的内容脚本在每个页面上运行，但您仍然需要标签 ID 来发送消息。
非常感谢，你救了我的命，它的作品
乐于助人:)
为兴奋造成的语法错误道歉 :) *它有效