Search code examples
javascriptgoogle-chromegoogle-chrome-extensionevent-handlingmessage-passing

Handling keyup event with message passing in chrome extension

I am new to chrome extension development. I am trying to create an extension consist of a text field and a button. If user enters some text in text-field, then exact thing should automatically get entered login-id field of HTML page.

Here are my files..

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

Its just showing "written" on console. Not displaying request, sender content at console, also not entering anything in login_username

Can anybody please help to figure out where I am going wrong?

Solution

  • You cannot send a message to a content script using chrome.runtime.sendMessage. You have to use chrome.tabs.sendMessage with the id of the tab where your content script is running. For example, to send it to currently active tab, you could use something like:

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