0

私は、browser_actionとcontent_scriptsの間でデータを共有しようとしています。content_scriptsとbrowser_actionからのChrome Syncデータへのアクセス

現在、私はbrowser_actionページ内のデータにアクセスすることができます(設定された一度正しい値が返され、セッションに保存される)。

ただし、browser_action.jsに保存しても、content_scriptのデータにアクセスできないようです。 console.logは常に値の "undefined"を返します。

予想されるワークフローは次のようになります。

content_script: 

if syncData === undefined { 
    /* Do default stuff */ 
} else if syncData { 
    /* Do stuff if set to true */ 
} else { 
    /* Do stuff if set to false */ 
} 

browser_action.js: 

/* Allow user to set syncData so that it saves across page refreshes and is accessible by content_script */ 

manifest.jsonを

{ 
    "manifest_version": 2, 

    "name": "Name", 
    "description": "Description", 
    "version": "1.0", 
    "content_scripts": [ 
     { 
      "js": ["content_script.js"] 
     } 
    ], 
    "browser_action": { 
     "default_icon": "icon128.png", 
     "default_popup": "browser_action.html" 
    }, 
    "icons": { 
     "16": "icon16.png", 
     "48": "icon48.png", 
     "128": "icon128.png" 
    }, 
    "permissions": [ 
     "storage" 
    ] 
} 

content_script.js

chrome.storage.sync.get('descriptionEnabled', function (data) { 
    console.log(data.descriptionEnabled) 
}); 

browser_action.js

/*jslint browser: true*/ 
/*global window, document, alert, chrome */ 

window.onload = function() { 
    "use strict"; 
    chrome.storage.sync.get('descriptionEnabled', function (data) { 
     if (data.descriptionEnabled === true) { 
      document.getElementById("settingsId").value = "on"; 
     } else if (data.descriptionEnabled === false) { 
      document.getElementById("settingsId").value = "off"; 
     } 
    }); 
    document.getElementById("settingsId").onchange = function() { 
     if (document.getElementById("settingsId").value === "on") { 
      chrome.storage.sync.set({'descriptionEnabled': true}); 
     } else { 
      chrome.storage.sync.set({'descriptionEnabled': false}); 
     } 
    }; 
}; 
ユーザーデータの格納に210

browser_action.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
     <script type="text/javascript" src="browser_action.js"></script> 
     <title>Description Background Page</title> 
    </head> 
    <body> 
     <div>Display Saved Notifications?</div> 
     <div> 
      <select id="settingsId"> 
       <option value="on">Yes</option> 
       <option value="off">No</option> 
      </select> 
     </div> 
    </body> 
</html> 

答えて

0

まず、matchesフィールドをmanifest.jsonに追加することを忘れないでください。

コードはうまく機能しますが、ポップアップページの読み込みとオプションの変更後にストレージを設定することに注意してください。コンテンツスクリプトを再ロードして再度実行するには、Webページを更新する必要があります現在のWebページのコンソールからtrueまたはfalseが表示されます。

+0

これは間違いありませんでした。 – Britt

0

あなたの拡張のため、あなたはstorage.syncstorage.localのいずれかを使用することができます。 storage.syncを使用すると、ユーザーが同期を有効にしている場合は、保存されたデータが自動的にそのユーザーがログインしているChromeブラウザに同期されます。

Chromeがオフラインの場合、Chromeはデータをローカルに保存します。次回ブラウザがオンラインになると、Chromeによってデータが同期されます。ユーザーが同期を無効にしても、storage.syncは引き続き動作します。この場合は、storage.localと同じように動作します。

詳細とサンプルコードについてはdocumentをご確認ください。

あなたが受け取ったエラーについては、blogをよく読んで理解してください。ここでは、console.logに何の意味と未定義があるのか​​を説明します。

また、SO questionもチェックしてみてください。それは、あなたがコンテンツスクリプトとバックグラウンドアクションについてたくさんの助けになると思います。

0

メッセージングは​​コンテンツと拡張スクリプト間で通信する最も一般的な方法ですが、ストレージも使用できます。あなたのコンテンツスクリプトでは、ストレージの変更イベントのリスナーを追加します。

chrome.storage.onChanged.addListener(function(changes, areaName){ 
if(areaName=="sync"){ 
    if(changes.descriptionEnabled) 
    console.log(changes.descriptionEnabled.newValue); 
    } 
}); 

ストレージ、特にローカル、あるかなり速いので、時々、あなたがメッセージの代わりにストレージの変更のためのリスニング、とにかくストレージにデータを保存する必要がある場合理にかなっている。

メッセージの追加の違いは、このイベントが変更された値でのみ発生することです。値がtrueで新しい値もtrueの場合、イベントは発生しません。

関連する問題