Chrome拡張機能の開発は初めてです。テキストフィールドとボタンで構成される拡張機能を作成しようとしています。ユーザーがテキストフィールドにテキストを入力すると、正確なものが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");
});
}
});
マニフェスト.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
誰かが私がどこで間違っているのかを理解するのを手伝ってくれますか？
を使用してコンテンツスクリプトにメッセージを送信することはできません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");
});
});
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加