JSでHTMLタグを追加する| chrome-extension

Chrome拡張機能をビルドします。JSでHTMLタグを追加する| chrome-extension

JavaScriptを使用していくつかの新しいhtmlタグを追加する必要がありましたが、うまくいきませんでした。
私はこの小さなサンプルを自分のローカルWebサーバーと自分の拡張で試しました。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>||Working with elements||</title> 
</head> 
<body> 
    <div id="div1">This is old</div> 
    <script> 
    document.body.onload = addElement; 

    function addElement() { 
    var newDiv = document.createElement("div"); 
    var newContent = document.createTextNode("This is new!"); 
    newDiv.appendChild(newContent); 
    var currentDiv = document.getElementById("div1"); 
    document.body.insertBefore(newDiv, currentDiv); 
} 
    </script> 
</body> 
</html>

http://www.jsfiddle.net/yz9v8479/

あなたはそれが通常のWebページのために正常に動作します見ることができるように。
しかし、それは私の拡張機能で動作しません。

しかし、私のコードと同じです。なぜそれが動作していないのか分かりません。

出典

2016-04-20 Paili

それだけ（jsfiddleのような）外部リンクのコードを持つことが許されません。 StackOverflowはそれを強制するので、あなたはリンクをコードスニペットにすることによって意図的にバイパスすることに決めました。それをしないでください。あなたがデバッグしたいコードは、質問そのものに入っている必要があります.-それ以降は、jsfiddleリンクを追加しても問題ありません。 – Xan

この情報をお寄せいただきありがとうございます。私はそれを変えた。 @Xan – Paili

デフォルトでは、inline script won't be executedです。 JSコードを外部のJavaScriptファイルに抽出して、スクリプトタグとしてインクルードしてみてください。

manifest.jsonを

{ 
    "name": "36738850", 
    "version": "0.1", 
    "manifest_version": 2, 
    "browser_action": { 
     "default_title": "Your browser action title", 
     "default_popup": "popup.html" 
    } 
}

popup.html

<!DOCTYPE html> 
<html> 

<head> 
    <title>||Working with elements||</title> 
</head> 

<body> 
    <div id="div1">This is old</div> 
    <script src="popup.js"></script> 
</body> 

</html>

popup.js

document.body.onload = addElement; 

function addElement() { 
    var newDiv = document.createElement("div"); 
    var newContent = document.createTextNode("This is new!"); 
    newDiv.appendChild(newContent); 
    var currentDiv = document.getElementById("div1"); 
    document.body.insertBefore(newDiv, currentDiv); 
}

出典

2016-04-20 09:05:13

どちらも自分のプラグインでは機能しません。 – Paili

@ Paili、投稿にコードを追加することができれば、多くの助けになります。私は答えを編集し、サンプルコードを提供しました。 –

ああ、私は愚かにマニフェストを変えるのを忘れてしまった。どうもありがとう：） – Paili

JSでHTMLタグを追加する| chrome-extension

答えて

関連する問題