だから、私はこの問題を行ったり来たりしてきました。私が欲しいのは、ウェブサイトでボタンが押されたときに(injected.jsファイル内の)コードの一部を実行することです。自分で書いたコードを実行したい。
これは実行可能である必要がありますか?私はそれを調べました、そしてこれは開発者のドキュメントから取られています:
コンテンツスクリプトは、孤立した世界と呼ばれる特別な環境で実行されます。挿入されたページのDOMにはアクセスできますが、ページによって作成されたJavaScript変数や関数にはアクセスできません。各コンテンツスクリプトは、実行中のページで実行されている他のJavaScriptがないかのように見えます。同じことが逆にも当てはまります。ページで実行されているJavaScriptは、コンテンツスクリプトで定義された関数を呼び出したり、変数にアクセスしたりすることはできません。
例でわかるように、同じページ(http://developer.chrome.com/extensions/content_scripts.html#execution-environment)にもあります。クリックイベントを何かと実行コードに添付できるはずです。そのボタンがクリックされたときに同じ.jsファイルから?右?
とにかく、これが私が書いたコードです:
$sidebar = $('<div><div></div></div>')
.css('background', '#eee')
.css('width', '20%')
.css('position', 'fixed')
.css('right', '0px')
.css('top', '0px')
.css('height', '100%');
$form = $('<br/><center><div class="input-append">\
<input class="span2" id="add_cat_input" type="text">\
<button class="btn" type="button">Add category</button>\
</div>\
<div class="input-append"><select id="categories">\
<option>A</option>\
<option>B</option>\
<option>C</option>\
<option>D</option>\
<option>E</option>\
</select>\
<button class="btn" type="button">Edit</button><button class="btn" type="button">Delete</button>\
</div></center>');
$('body').prepend($sidebar);
$sidebar.append($form);
$(document).ready(function() {
console.log(document.getElementById("add_cat_input"));
document.getElementById("add_cat_input").addEventListener("click", function() {
console.log('hej');
}, false);
});
しかし、「カテゴリの追加」を押しても何も起こりません。
誰かが理由を説明できますか?私はそれを間違っていますか?
上記のコードはmyscript.jsからのものです。これが私のmanifest.jsonです
{
"name" : "πSpend",
"version" : "0.1",
"description" : "Creates a piechart of the spendings in your bankaccount.",
"permissions": [ "cookies", "tabs", "http://*/*", "contextMenus" ],
"icons": { "16": "cookie.png", "48": "cookie.png", "128": "cookie.png" },
"browser_action": {
"default_icon": "cookie.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"manifest_version": 2,
"content_scripts": [
{
"matches": ["https://internetbanken.privat.nordea.se/*"],
"css": [ "bootstrap.min.css" ],
"js": ["jquery.js", "raphael-min.js", "g.raphael-min.js", "g.pie-min.js", "myscript.js"]
}
]
}
途中で、代わりに何らかの形式のメッセージ投稿を使用しようとしましたが、この行は次のとおりです。
var port = chrome.extension.connect();
このエラーが発生します:
Port error: Could not establish connection. Receiving end does not exist.