1

私は最初の「すべてをまとめる」Chrome 拡張機能に戸惑っています。何をしようとしているのか、次にスクリプトの抜粋を使用してどのように取り組んできたのかを説明します。

  1. options.html ページと、ユーザーがテキスト フィールドに URL を設定できるようにする options.js スクリプトがあります。これは、localStorage を使用して保存されます。
function load_options() {
   var repl_adurl = localStorage["repl_adurl"];
   default_img.src = repl_adurl;
   tf_default_ad.value = repl_adurl;
}

function save_options() {
   var tf_ad = document.getElementById("tf_default_ad");
   localStorage["repl_adurl"] = tf_ad.value;
}

document.addEventListener('DOMContentLoaded', function () {
   document.querySelector('button').addEventListener('click', save_options);
});

document.addEventListener('DOMContentLoaded', load_options );
  1. 私の contentscript は、スクリプト 'myscript' をページに挿入します (そのため、ページの html から img 要素にアクセスできます)
var s = document.createElement('script');
s.src = chrome.extension.getURL("myscript.js");
console.log( s.src );
(document.head||document.documentElement).appendChild(s);
s.parentNode.removeChild(s);
  1. myscript.js は、何らかの方法でローカル ストレージ データを取得し、画像要素の操作方法を決定することになっています。

HTML ソースから画像を取得するのに問題はありませんが、localStorage データにアクセスできないようです。環境が異なる2つのスクリプトに関係しているに違いないことはわかっていますが、この問題を克服する方法がわかりません. html ソースにアクセスできます。

うまくいけば、ここの誰かが私が見逃していることを提案してくれるでしょう。

ありがとう、私はあなたが提供できる助けに感謝します!

-アンディ

4

1 に答える 1

7

まず、ページの DOM (<img>要素) にアクセスするためにスクリプトを挿入する必要はありません。DOM はすでにコンテンツ スクリプトで使用できます。

コンテンツ スクリプトは拡張機能のプロセスに直接アクセスできませんlocalStorage。これを実現するには、バックグラウンド ページとコンテンツ スクリプトの間に通信チャネルを実装する必要があります。幸いなことに、Chrome はこの目的のために単純なメッセージ パッシング APIを提供しています。

chrome.storageの代わりに APIを使用することをお勧めしますlocalStorage。の利点はchrome.storage、コンテンツ スクリプトで使用できることです。これにより、バックグラウンド ページなしで値を読み取ったり設定したりできます。現在、コードは非常に扱いやすいように見えるため、同期 APIlocalStorageから非同期chrome.storageAPI への切り替えは可能です。

選択に関係なく、コンテンツ スクリプトのコードは設定を非同期で読み書きする必要があります。

// Example of preference name, used in the following two content script examples
var key = 'adurl';

// Example using message passing:
chrome.extension.sendMessage({type:'getPref',key:key}, function(result) {
    // Do something with result
});
// Example using chrome.storage:
chrome.storage.local.get(key, function(items) {
    var result = items[key];
    // Do something with result
});

ご覧のとおり、両者の間にほとんど違いはありません。ただし、最初に機能させるには、バックグラウンド ページにさらにロジックを追加する必要があります。

// Background page
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.type === 'getPref') {
        var result = localStorage.getItem(message.key);
        sendResponse(result);
    }
});

一方、 に切り替えたい場合chrome.storageは、オプション ページのロジックを少し書き直す必要があります。現在のコード ( を使用localStorage) は同期であり、chrome.storageは非同期であるためです。

// Options page
function load_options() {
   chrome.storage.local.get('repl_adurl', function(items) {
       var repl_adurl = items.repl_adurl;
       default_img.src = repl_adurl;
       tf_default_ad.value = repl_adurl;
   });
}
function save_options() {
   var tf_ad = document.getElementById('tf_default_ad');
   chrome.storage.local.set({
       repl_adurl: tf_ad.value
   });
}

ドキュメンテーション

于 2013-04-08T09:34:06.563 に答える