크롬 확장 메시지 전달 키 이벤트 처리

크롬 확장 기능을 처음 사용했습니다. 텍스트 필드와 버튼으로 구성된 확장을 만들려고합니다. 사용자가 텍스트 필드에 텍스트를 입력하면 정확한 내용이 HTML 페이지의 login-id 필드에 자동으로 입력됩니다. 여기크롬 확장 메시지 전달 키 이벤트 처리

는

<!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

Popup.html 내 파일 ..

있습니다

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

아무도 내가 잘못 가고있는 것을 알아낼 수 있습니까?

출처

2017-11-29 firoj_mujawar

ID가 'login_username'인 요소가없는 것 같습니다. 또한 애드온을 사용하여 사용자가 시스템에 로그인하기 위해 입력해야하는 정보를 변경할 수 없습니다. 이를 처리하기 위해 서버의 실제 로그인 프로세스를 업데이트해야합니다. –

@Obsidian,이 확장 기능은 어떤 페이지에서나 작동하므로 일부 웹 페이지에서'login_username'을 사용할 수 있습니다. 그리고 제가 거기에서 일하고있는 페이지가 있습니다. –

중간 생각. 팝업 메시지를보아야하는 콘솔은 myscript.js의 메시지가 표시되는 곳이 아니라는 것을 알기 때문에 웹 페이지를 검사하여이를 확인해야합니다. –

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

출처

2017-11-29 08:48:04

** "콘텐츠 스크립트가 실행되는 탭의 ID로"** 내 질문은 콘텐츠 스크립트가 현재 페이지에서 기본적으로 실행되어야합니까? –

매니페스트에 따르면 콘텐츠 스크립트는 모든 페이지에서 실행되지만 메시지를 보내려면 여전히 탭 ID가 있어야합니다. –

고맙습니다. 내 인생을 살 렸습니다. –

크롬 확장 메시지 전달 키 이벤트 처리

답변

관련 문제