1

jquery-1.8.3.min.jsとjquery-ui.jsとjquery-ui-base64.cssをコンテンツスクリプトにロードするChrome拡張機能があります。バックグラウンドスクリプト
ではなく、コンテンツスクリプトで使用します。 構成を正しく設定しましたが（私は思う）、コンソールにエラーが表示されると、ウィンドウにアイコンが表示されますが、Chromeウィンドウにエラーが表示されます。 バージョン23.0.1271.95mを使用しているchromeimのバグですか？

これはマニフェストです：

{
"name":"Sample communication from content to background",
"description":"This is a sample for Simulating communication from content to background",
"manifest_version":2,
"version":"2",
"background":{
    "scripts":["background.js"]
},
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js"],
      "run_at":"document_end",
      "all_frames": true,
      "css":["jquery-ui-base64.css"]
    }
  ],
"web_accessible_resources": [
    "client.js","jquery-1.8.3.min.js","jquery-ui.js","jquery-ui-base64.css",
    "images/ui-bg_flat_0_aaaaaa_40x100.png",
    "images/ui-bg_flat_75_ffffff_40x100.png",
    "images/ui-bg_glass_55_fbf9ee_1x400.png",
    "images/ui-bg_glass_65_ffffff_1x400.png",
    "images/ui-bg_glass_75_dadada_1x400.png",
    "images/ui-bg_glass_75_e6e6e6_1x400.png",
    "images/ui-bg_glass_95_fef1ec_1x400.png",
    "images/ui-bg_highlight-soft_75_cccccc_1x100.png",
    "images/ui-icons_222222_256x240.png",
    "images/ui-icons_2e83ff_256x240.png",
    "images/ui-icons_454545_256x240.png",
    "images/ui-icons_888888_256x240.png",
    "images/ui-icons_cd0a0a_256x240.png"
  ],
"permissions": [ 
        "unlimitedStorage",
        "http://*/",
        "<all_urls>",
        "tabs"
   ]
}

jquery-ui-base64.cssで、すべてのimagsのURLロードを次のように変更しました。

 url(chrome-extension://__MSG_@@extension_id__/chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_75_ffffff_40x100.png) 
url(chrome-extension://__MSG_@@extension_id__/chrome-extension://__MSG_@@extension_id__/images/ui-bg_highlight-soft_75_cccccc_1x100.png)

しかし、それでもエラーが発生します：

Denying load of chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_flat_75_ffffff_40x100.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Denying load of chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_highlight-soft_75_cccccc_1x100.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

画像は画像ディレクトリにあり、作成したJQueryダイアログにアイコンが表示されます。

4

1 に答える 1

1

編集1）

次のコードは、すべての background\extension 関連の DOM および css で機能します

マニフェスト.json

すべての権限が定義された単純な json 構造

{
"name": "My extension",
"version": "1.0",
"permissions": [
    "http://*/*", "tabs", "https://*/*"
],
"browser_action": {
    "default_icon": "icon.jpg",
    "default_popup":"popup.html"
},
"manifest_version": 2
}

popup.html

ブラウザ アクション ポップアップのリンクされたスタイル シート

<html>
<head>
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
</body>
</html>

スタイル.css

画像パスに url() を使用

body{
    width : 500px;
    height: 500px;
    background-image: url('img/icon.jpg');
}

それでもダメなら教えて

ここに画像の説明を入力

編集2）

コンテンツを通じて画像を挿入するため

解決策 a)

このコンバーターを使用して、画像を base64 文字列に変換し、それらを次のように使用できます。

{ background-image: url(data:image/png;base64,iVBORw ........};

解決策 b)

次のコードは機能しません。

{
background-image:url(chrome.extension.getURL('img/icon.jpg'));
}

chrome.extension.getURL()は css では定義されていません。

だから、背景画像\任意の画像URLの注入にjsを使用しました（動的URLがあるため）

マニフェスト.json

コンテンツ スクリプトと CSS に対してすべての権限が定義された単純な json 構造

{
"name": "My extension",
"version": "1.0",
"permissions": [
    "http://*/*", "tabs", "https://*/*"
],
 "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js":["content.js"],
      "css": ["styles.css"]
    }
  ],
"web_accessible_resources": [
    "img/icon.jpg"
],  
"manifest_version": 2
}

content.js

些細なユースケースとして、div を用意し、背景の Image プロパティを追加しました

var newdiv = document.createElement('div');
newdiv.setAttribute("id", "moot450");
document.body.appendChild(newdiv);
document.getElementById('moot450').style.backgroundImage = "url(" + chrome.extension.getURL('img/icon.jpg') + ")";

スタイル.css

挿入された div を調整するために別の CSS を挿入しました

#moot450{
    position:absolute; 
    width:500px;
    height:500px;
    /*background-image:url(chrome-extension://faaligkhohdchiijdkcokpefpancidoo/img/icon.jpg);*/
}

出力

注射後にGoogleページから取得したスクリーンショット

ここに画像の説明を入力

さらに情報が必要な場合、または失敗した場合はお知らせください。

于 2012-12-05T08:48:55.717 に答える