2012-03-16 14 views
2

ウェブページをあるアルファベットから別のアルファベットに訳すことができるシンプルなChrome拡張機能を作成する方法を理解しようとしています。残念ながら、Chromeの拡張機能に関するGoogleのドキュメントは、初心者にとってはかなり混乱します。私はここで多くの似たような質問をしました。 Replace text in website with Chrome content script extensionでも、それでも明らかにすることはできません。試しに、私はページのすべての "a"を "Z"のものに置き換えようとしています。ウェブページ上の記号をChrome拡張子で置き換えてください

{ 
    "name": "My Chrome extension", 
    "version": "0.1", 
    "browser_action": { 
    "default_icon": "icon.png" 
}, 

"permissions": [ 
    "tabs", "http://*/*", "https://*/*" 
], 

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

} 

Myscript.js:

は、ここに私のmanifest.jsonをだ

chrome.browserAction.onClicked.addListener(function(tab) { 
chrome.tabs.executeScript(
    null, {code:"document.body.innerHTML = document.body.innerHTML.replace(new RegExp("a", "g"), "Z")"}); 
}); 

しかし、これは動作しません。私はMyscript.jsに一つだけの行が含まれている場合:すべて

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("a", "g"), "Z"); 

を「」文字は、すぐにページがロードされているように「Z」に置き換えられますが、私は取得したいので、これは、私の目標ではありません拡張ボタンを押した後にのみ動作します。

ご協力いただければ幸いです。

+0

警告: 'document.body.innerHTML = ...'を使用すると、既存のイベントリスナーと属性以外のプロパティがすべて削除されます。 –

答えて

1

あなたは、コンテンツのスクリプトを使用してコードを挿入するためにあなたの拡張機能を設定しました。一致スクリプトに一致するページにコンテンツスクリプトが挿入されます。あなたが望むのは、ブラウザアクションをクリックした場合にのみスクリプトを挿入することです。このために、chrome.browserAction.onClickedイベントをリッスンし、それに反応するバックグラウンドページを持つことができます。または、コードにページを挿入するブラウザアクションのデフォルトページを作成し、スクリプトの一部としてwindow.closeを置くと、ポップアップが発生しなくなり、バックグラウンドページの使用を避けることができます可能であれば背景ページの使用を避ける)。第一の方法の例について


http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/

そして、ここでは、(set_page_colorサンプルの修正版である)第2の方法の一例だ....このサンプルをチェックしてください...
manifest.jsonを

{ 
    "name": "A browser action that changes the page color.", 
    "version": "1.0", 
    "permissions": [ 
    "tabs", "http://*/*", "https://*/*" 
    ], 
    "browser_action": { 
     "default_title": "Set this page's color.", 
     "default_icon": "icon.png", 
     "default_popup": "popup.html" 
    }, 
    "manifest_version": 2 
} 

popup.html

<!doctype html> 
<html> 
    <head> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    </body> 
</html> 

popup.js

chrome.tabs.executeScript(null,{file:"injectedCode.js"}); 
window.close(); 

injectedCode。

// This was just a quick look at changing text on a page 
// there could be more tags you should ignore and there could be a better way of doing this all together 
var ignoreTags = ["NOSCRIPT","SCRIPT","STYLE"]; 
var nodeIterator = document.createNodeIterator(
    document, 
    NodeFilter.SHOW_TEXT, 
    function (node){ 
     var parentTag = node.parentNode.tagName.toUpperCase(); 
     if (ignoreTags.indexOf(parentTag)==-1) {return true} else {return false}; 
    }, 
    false 
); 

var node; 
while ((node = nodeIterator.nextNode())) { 
    node.data = node.data.replace(/a/g, 'z'); 
} 

NOTE jsのコメントchrome.tabschrome.browserActionロブWが指摘するように
chrome.browserAction.onClickedが背景ページで使用する必要がある理由であるコンテンツスクリプトでは使用できません。

+0

@Rob Wそれを試してみてください。ポップアップは発生しません。ポインタだけが分割された秒間ビジーアイコン(砂時計)を取得します。私は、バックグラウンドの方法がより正確できれいであることに同意します。しかし、私はとても小さいもののバックグラウンドページを持っている拡張機能を気にしていません....イベントページが来ることを望むheres ..... – PAEz

+0

ポップアップは開かれますが、非常に速く閉じるので、通常は目立たない。 +1を正しく実装する方法を2つ説明してください。しかし、なぜ最初の方法がうまくいかなかったのか説明しなかった。これは、コンテンツスクリプトでは 'chrome.tabs'と' chrome.browserAction' APIが利用できないためです。 –

+0

@Rob Wそれを試しましたか?私は非常に良い視力を得て、何もポップアップしません... Windows XP、Chrome 19.somtheingまたはその他。 – PAEz

0

myscript.jsのコードは、ページに注入されるものです。選択したページに挿入するコードをすべてのページに自動的に挿入するため、現在セットアップしている方法は機能しません。 myscript.jsコードをbackground_pageに移動する必要があります。このコードは、ボタンをクリックしたときにのみ挿入されます。

https://code.google.com/chrome/extensions/background_pages.html

+0

ありがとうございますが、うまくいきませんでした。私は\t "background_page": "background.html"という行を私のmanifest.jsonに追加し、両方のバージョンのbackground.htmlを試しました。いずれもうまくいきませんでした。スクリプトに何か問題がありますか? – user1274925

+0

「両方のバージョンのbackground.html」はどういう意味ですか? – abraham

+0

これは私がmyscript.jsからbackground.htmlにコードを移したことを意味し、myscript.jsの2つのバージョンがありました。 – user1274925

関連する問題