Chrome拡張機能 - JS関数が認識されない

Question

クローム拡張機能の新機能です。 私は物事の仕組みを見るために非常に基本的な拡張機能を構築しようとしています。

ビルドしたい拡張機能は、Webページのすべての "h1"要素と共にボタンを追加する必要があります。

これは私のjsファイルです：

function myFunction(element) { 
    alert(element.innerText); 
}; 


var elements = document.querySelectorAll("h1"); 

for (var i = 0; i < elements.length; i++) 
{ 
    var element = elements[i]; 
    // element.innerHTML += "<form><button type='button' value='Copy' onclick='myfunction(element)'></form>"; 
    element.innerHTML += "<button onclick='myFunction()'>Click me</button>"; 
}; 

私は何も起こりませんボタンをクリックすると、 「MyFunctionのは、」認識されないようです。

これが私のマニフェストです：

{ 
    "manifest_version": 2, 

    "name": "MagiCopy", 
    "description": "This extension shows a Google Image search result for the current page", 
    "version": "1.0", 

    "browser_action": 
    { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 

    "chrome_url_overrides": 
    { 
    "newtab" : "newtab.html" 
    }, 

    "background": 
    { 
    "scripts": ["background.js"] 
    }, 

    "permissions": 
    [ 
    "activeTab", 
    "https://ajax.googleapis.com/" 
    ], 

    "content_scripts": 
    [ 
    { 
     "matches": ["http://*/*", "https://*/*"], 
     "js": ["myscript.js"], 
     "run_at" : "document_end" 
    } 
    ] 
} 

私が間違って何をしているのですか？

Answer 1

ここには多くの問題がありますが、最も重要なものから始めましょう。

Chrome拡張機能のコンテンツスクリプトはライブin an isolated environmentです。

コンテンツスクリプトは、独立した世界と呼ばれる特別な環境で実行されます。彼らは注入されたページのDOMにアクセスできますが、ページで作成されたJavaScript変数や関数にはアクセスできません。実行中のページで他のJavaScriptが実行されていないかのように、各コンテンツスクリプトを探します。逆も同様です。ページ上で実行されているJavaScriptは、関数を呼び出すことも、コンテンツスクリプトによって定義された変数にアクセスすることもできません。

あなたはそれに接続されているインラインコードを持つ要素（要素のパラメータとしてonclick）を作成すると、そのコードは、ページのコンテキストに住んでいます。

コンテンツはコンテンツスクリプトから隔離されているため、myFunctionは定義されていません。

ここで正しい方法は、インラインスクリプトを完全に避け、addEventListenerを使用してリスナーを接続することです。言っ

---

、次の問題：あなたはDOMを追加するinnerHTMLを操作しています。状態情報を破壊する可能性があるので、これはthoroughly bad ideaです。

1. 変換elementの内容をDOMノードを表す文字列に：ここで

   はelement.innerHTML += "something"が何をするかです。これは、イベントリスナーのように後でDOMノードに接続されたものをすべて破棄します。

2. 「何か」をその文字列に追加します。
3. elementのすべてのDOMノードを破棄します。
4. elementの内容を結果文字列から生成されたDOMに置き換えます。

潜在的に他人の（またはあなたの）仕事を破壊しないでください。文字列への変換を行わない適切なDOM操作を使用します：ノードを作成し、それを目的のノードに挿入（追加）します。

var button = document.createElement("button"); 
button.text = "Click me"; 
button.addEventListener("click", myFunction); 
element.appendChild(button); 

---

最後に、あなたはelementがmyFunctionに渡されることを何らかの理由で期待しています。イベントリスナーは実際に引数を受け取りますが、代わりにEventオブジェクトです。

function myFunction(e) { // e is the event 
    console.log(e.target); 
    console.log(this); 
}