2017-12-28 49 views
2

ユーザーがウェブサイトにアクセスした後にChrome拡張機能にJavascriptを読み込ませたいしかし、現在のところ、Javascriptはユーザーが拡張アイコンをクリックして拡張ポップアップが開くまで実行されます。Chrome拡張機能Javascriptのみアイコン上で実行する

私はこのChrome extension to load the script without clicking on icon質問の答えを見ました。

私のmanifest.jsonをです:

{ 
    "manifest_version": 2, 

    "name": "Javascript example", 
    "description": "Some description.", 
    "version": "1.1", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
    "activeTab", 
    "storage" 
    ], 
    "content_scripts": [ 
    { 
     "matches": ["*://*/*"], 
     "js": ["popup.js"] 
    } 
    ] 
} 

popup.jsは次のとおりです。

document.addEventListener('DOMContentLoaded',() => { 

    alert("Working"); 
}); 

popup.htmlは次のとおりです。警告ダイアログが表示され

<!doctype html> 
<html> 
    <head> 
    <title>Getting Started Extension's Popup</title> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    </body> 
</html> 

場合にのみ、Iページが読み込まれたときではなく、拡張子アイコン(popup.htmlが実行されているとき)をクリックします。私はpopup.jsファイルを拡張アイコンをクリックする必要なく実行するようにします。私は何が欠けていますか?あなたは、コンテンツのスクリプトが必要https://developer.chrome.com/extensions/content_scripts

+1

追加 ' "run_at"。 –

+0

@IvánNokonokoWorked! – user5155835

答えて

2

マニフェストは動作しますが、run_atはデフォルトでdocument_idleになります。つまり、DOMContentLoadedは既に起動しています。代わりにrun_atdocument_startを指定することでこれを修正できます。

{ 
    "manifest_version": 2, 

    "name": "Javascript example", 
    "description": "Some description.", 
    "version": "1.1", 

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

    "permissions": [ 
    "activeTab", 
    "storage" 
    ], 
    "content_scripts": [ 
    { 
     "matches": ["*://*/*"], 
     "run_at": "document_start", 
     "js": ["popup.js"] 
    } 
    ] 
} 

出典:マニフェストで `content_scripts`エントリで "document_start"`:https://developer.chrome.com/extensions/content_scripts

0

あなたはページのコンテキストと、ユーザーが特定のサイトを訪問するとき、あなたが知っているよ、このように実行されるコンテンツのスクリプトを使用することができます。

コンテンツスクリプトは、Web ページのコンテキストで実行されるJavaScriptファイルです。標準のDOM(Document Object Model)を使用することにより、 ブラウザにアクセスするウェブページの詳細を読むか、 に変更することができます。

  • 見つけ、プロセステキストを読みやすくするためにフォントサイズを大きくして、WebページにリンクされていないURLを検索し、ハイパーリンク
  • にそれらを変換します。ここでは

    は、コンテンツスクリプトが何ができるかのいくつかの例であり、 DOMのマイクロフォーマットデータ

コンテンツスクリプトのコードを常に挿入する必要がある場合は、次の例のように、content_scriptsフィールドを使用して拡張マニフェストを作成します。

{ 
    "name": "My extension", 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css": ["mystyles.css"], 
     "js": ["jquery.js", "myscript.js"] 
    } 
    ], 
    ... 
} 

は、より多くの情報&実装のためthisリンクを参照してください。

+0

例 – user5155835

+0

で詳細を説明できますが、回答のリンクに例がありますか?マニフェストを書き直したいのですか? –

+0

私はmainfestを書いています。コンテンツスクリプトを使用したjson私が書いたものに何が問題なのかを尋ねています – user5155835

1

+0

しかし、私は既にmanifest.jsonで書かれたcontent_scriptsを持っています。私は間違って何をしていますか? – user5155835

+0

あなたのファイルの内容で質問を更新できますか? –

+0

質問をpopup.htmlの内容で更新しました – user5155835

関連する問題