ユーザがツールバーの拡張機能アイコンをクリックしたときにwebExtensionによってドキュメント要素を変更するにはどうすればよいですか？

Question

webExtensionを作成したいのですが、この拡張機能用のツールバーにアイコンがあります。私はこのコードを入れて、私のmanifest.jsonをファイルで ：ツールバーにこの拡張機能のアイコン上

{ 
"manifest_version": 2, 
"name": "test", 
"version": "1.0", 
"description": "test", 
"icons": { 
    "48": "icons/icon48.png", 
    "96": "icons/icon96.png" 
}, 
"background": { 
    "scripts": ["background.js"] 
}, 
"permissions": [ 
    "activeTab", 
    "contextMenus" 
], 

"browser_action": { 
    "default_icon": { 
     "19": "button/btn19.png", 
     "38": "button/btn38.png" 
    }, 
    "default_title": "test" 
} 
} 

ユーザーのクリックを、私は、現在のページの要素を取得し、<に私がしたい文書の>タグを追加します。私はこのJavaスクリプトコードをbackground.jsファイルに入れました。しかし、これらのコードは実行されません。 これを修正するにはどうすればよいですか？

background.js：

function change() { 
var elems = document.body.getElementsByTagName("*"); 
var re = new RegExp(/abba\b/g); 
for (var i = 0; i < elems.length; i++) { 
    var str = elems[i].innerHTML; 
    if (!str.match(/<[a-zA-Z0-9\s:./\"\'=\\;()-_]*>/) && re.test(str)) { 
     var aTag = document.createElement("a"); 
     aTag.setAttribute('href', "test.php?t=" + str.match(/abba\b/)[0]); 
     aTag.setAttribute('target', "_blank"); 
     aTag.innerHTML = " --**CHANGES**-- "; 
     elems[i].appendChild(aTag); 
    } 
} 
} 
browser.browserAction.onClicked.addListener(change); 

Answer 1

背景ページは、ウェブページのコンテンツにアクセスすることはできません。

コンテンツスクリプトを使用する必要があります。コンテンツのスクリプトは、アイドル

に、ページの読み込み後にページに注入されているあなたはmanifest.json

"content_scripts": [{ 
    "matches": ["*://*/*"], 
    "js": ["contentscript.js"] 
}] 

にこれを追加し、名前を変更することができ、あなたの内線にコンテンツスクリプトを追加するdocumentation

からより多くの情報を取得しますbackground.js~contentscript.js。このようにして、コードは常に各ページで実行されます。

または代わりにちょうど

contentscript.js contentscript.jsを作成してそこに内容にchange()機能を移動：ブラウザアクションがクリックされたとき

var elems = document.body.getElementsByTagName("*"); 
var re = new RegExp(/abba\b/g); 
for (var i = 0; i < elems.length; i++) { 
    var str = elems[i].innerHTML; 
    if (!str.match(/<[a-zA-Z0-9\s:./\"\'=\\;()-_]*>/) && re.test(str)) { 
     var aTag = document.createElement("a"); 
     aTag.setAttribute('href', "test.php?t=" + str.match(/abba\b/)[0]); 
     aTag.setAttribute('target', "_blank"); 
     aTag.innerHTML = " --**CHANGES**-- "; 
     elems[i].appendChild(aTag); 
    } 
} 

が、その後 background.js​​呼び出しますし。

browser.browserAction.onClicked.addListener(function(){ 
    browser.tabs.executeScript({file: "/contentscript.js"}) 
}); 

：それは唯一の必要

background.jsと呼ばれている。この方法