9

クロムの背景ページを理解しようとしています。サンプルの共食い後に background.js スクリプトを実行することができました。ユーザーがページにアクセスするたびに警告ボックスが表示されます。ただし、同じスクリプトを取得して background.html ファイルに移動すると、ファイルを実行できないようです。

マニフェスト ファイルを (スクリプトではなく) ページに更新すると、拡張機能が正常に読み込まれます。私はまた、ボディまたはヘッドで onload と呼ばれるようになったように、ボディのスクリプトタグに JavaScript を直接入れるか、関数に入れることで遊んでみました。

おそらく、Chrome 拡張機能で background.html ページが何に使用されるかという概念を理解していないのでしょうか?

マニフェスト ファイル:

{
  "name": "Testing Extension",
  "version": "0.2",
  "background": { "pages": ["background.html"] },
  "permissions": [
    "tabs", "https://mail.google.com/*", "http://*/*, https://*/*"
  ],
  "browser_action": {
    "name": "Do some action",
    "icons": ["icon.png"]
  },
  "manifest_version": 2,
  "web_accessible_resources": ["injectImage.js", "background.html"]
}

injectImage.js

alert('Got Here');
'use strict';   
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(null, {file: "injectImage.js"});
});

    chrome.browserAction.setBadgeBackgroundColor({color: [0, 200, 0, 100]});

    var i = 0;
    window.setInterval(function () {
        chrome.browserAction.setBadgeText({text: String(i)});
        i++;
    }, 10);

background.html

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-1.8.0.min.js"></script>
        <script src="injectImage.js"></script>
    </head>
    <body>
</body>
</html>

現在、このコードは右上隅にアイコンを配置する以外には何もしていないようです。

4

5 に答える 5

25

バックグラウンドは 1 ページのみで、およびまたは他の拡張ページ間でデータを送受信できるローカル サーバーのように機能します。content_scriptsdefault_popup

初めての方は、manifest.json で定義されている各例のマニフェスト バージョンをご覧ください。バージョン 2 ではより厳格なセキュリティ ポリシーが適用され、インライン JavaScript が無効になっているため、サンプル v1 コードをコピーして background.html に貼り付けても機能しなくなりました。srcすべてのスクリプトは、次のような属性を使用して HTML ファイルに含めることができる外部ファイルにある必要があります。<script src="main.js"></script>

私の理解では、基本的な拡張機能に一般的に使用されるコンポーネントが 4 つあります。

  1. によってのみアクセスできる、表示されているタブの DOMcontent_scripts

  2. content_scriptsは、manifest.json で識別される JavaScript ファイルの配列であり、タブの DOM に直接挿入されます。どうやら、タブの JS 変数と関数と content_scripts は対話できません。

  3. Chrome がスクリプトの配列を連結して生成する1 つの背景 HTML ページ、または一般に background.html という名前の 1 つのページとして定義されます。

  4. {"browser_action" : {"default_popup" : "popup.html"}}manifest.json で定義されたオプションのユーザー インターフェイスで、拡張機能のアイコンをクリックすると表示されます。ポップアップはタブの DOM に到達する方法がないため、タブのコンテンツが重要な場合は、次のような Chrome メッセージを使用してリクエストする必要があります。chrome.extension.sendMessage

背景は 1 つ以上のいずれかとして定義されますscripts。

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

またはとしてpage：

  "background": {
    "page": "background.html"
  },

バックグラウンド内で何が起こっているかを知りたい場合は、console.log を使用できますが、出力を検査するには、拡張機能ページからインスペクターを起動する必要があります。背景ファイルの名前が常に「_generated_background_page.html」であることもわかります。

ここに画像の説明を入力

于 2013-10-21T05:50:57.157 に答える
2

または、バックグラウンド ページを定義してその中のスクリプト ファイルを参照する代わりに、js を直接定義することもできます (コンテンツ セキュリティ ポリシー (CSP) により、インライン スクリプトは許可されません)。

  "background": {
    "scripts": ["background.js"]
  },
于 2015-11-16T05:47:46.030 に答える
2

マニフェスト ファイルにタイプミスがあります。背景ページを含めると、次のようになります。

"background": {"page": "background.html"}
于 2013-04-04T21:38:35.757 に答える
0

ここで言及されていないもう 1 つの落とし穴。やっ<script src="myscript"/>てもうまくいきません :P, で完全に入力する必要があります<script src="myscript"></script>. それを理解するのに少し時間がかかりました。

于 2014-04-01T03:26:42.723 に答える