Обработка события keyup с передачей сообщения в расширении Chrome

Я новичок в разработке расширений для Chrome. Я пытаюсь создать расширение, состоящее из текстового поля и кнопки. Если пользователь вводит какой-либо текст в текстовое поле, то точное значение должно быть автоматически введено в поле логина-идентификатора HTML-страницы.

Вот мои файлы..

Всплывающее окно.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

Может ли кто-нибудь помочь понять, где я ошибаюсь?


javascript google-chrome event-handling google-chrome-extension message-passing
person firoj_mujawar    schedule 29.11.2017    source источник
comment
Похоже, у вас нет элемента с идентификатором login_username. Кроме того, вы не можете использовать надстройку для изменения информации, которую пользователь должен ввести для входа в систему. Вам нужно будет обновить фактический процесс входа в систему на сервере, чтобы справиться с этим.   -  person Obsidian Age    schedule 29.11.2017
comment
@Obsidian, давайте рассмотрим, что login_username доступно на какой-то веб-странице, поскольку это расширение работает для любой страницы. И страница, над которой я работаю, там присутствует.   -  person firoj_mujawar    schedule 29.11.2017
comment
Просто промежуточная мысль. Вы знаете, что консоль, которую вам нужно просматривать для всплывающих сообщений, — это не то место, где будут появляться сообщения из myscript.js, вам нужно проверить веб-страницу, чтобы увидеть их — на всякий случай.   -  person Troy Wray    schedule 29.11.2017
comment
Вы не можете отправить сообщение в скрипт содержимого, используя chrome.runtime.sendMessage. Вы должны использовать chrome.tabs.sendMessage с идентификатором вкладки, на которой запущен ваш контент-скрипт.   -  person Iván Nokonoko    schedule 29.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы не можете отправить сообщение в скрипт содержимого, используя chrome.runtime.sendMessage. Вы должны использовать chrome.tabs.sendMessage с идентификатором вкладки, на которой запущен ваш контент-скрипт. Например, чтобы отправить его на текущую активную вкладку, вы можете использовать что-то вроде:

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");
        });
    });
}
person Iván Nokonoko    schedule 29.11.2017
comment
с идентификатором вкладки, на которой запущен ваш контент-скрипт Мой вопрос в следующем: контент-скрипт должен запускаться на текущей странице по умолчанию, нет? - person firoj_mujawar; 29.11.2017
comment
Согласно вашему манифесту, ваш скрипт контента запускается на каждой странице, но вам все же нужен идентификатор вкладки для отправки сообщения. - person Iván Nokonoko; 29.11.2017
comment
БОЛЬШОЕ ВАМ СПАСИБО, ВЫ СПАСЛИ МНЕ ЖИЗНЬ, ЕГО РАБОТАЕТ - person firoj_mujawar; 29.11.2017
comment
Рад помочь :) - person Iván Nokonoko; 29.11.2017
comment
Извините за грамматическую ошибку, допущенную от волнения :) * ЭТО РАБОТАЕТ - person firoj_mujawar; 29.11.2017