0

クロムエクステンションの開発は初めてです。私は、テキストフィールドとボタンで構成される拡張を作成しようとしています。ユーザーがテキストフィールドにテキストを入力すると、HTMLページのlogin-idフィールドに正確に入力する必要があります。ここでクロムエクステンションでのメッセージの受け渡しによるkeyupイベントの処理

は、私のファイルは

{ 
    "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

<!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をしています

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

誰かが間違っていると分かりますか?

+0

IDが「login_username」の要素は表示されません。また、システムにログインするためにユーザが入力しなければならない情報を変更するためにアドオンを使用することはできません。それを処理するには、サーバー上の実際のログインプロセスを更新する必要があります。 –

+0

@Obsidianでは、この拡張機能はどのページでも動作するため、いくつかのWebページで 'login_username'が利用可能であると考えられます。私がそこで働いているページがあります。 –

+0

ちょっと暫定的な考え。ポップアップメッセージの表示に必要なコンソールは、myscript.jsのメッセージが表示される場所ではないことがわかっているので、Webページを調べる必要があります。 –

答えて

0

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

** "あなたのコンテンツスクリプトが実行されているタブのIDで" ** ここで私の質問は、コンテンツスクリプトはデフォルトで現在のページで実行する必要がありますか? –

+0

マニフェストによれば、コンテンツスクリプトはすべてのページで実行されますが、メッセージを送信するにはタブIDが必要です。 –

+0

よろしくお願い致します。あなたは私の人生を保存しました。仕事は –

関連する問題