Chrome拡張機能で、変数を引き渡す方法を教えてください。

前提・実現したいこと

Chrome拡張機能で、OptionUIで設定したユーザーネームをBrowserActionのページに渡したいです。
OptionUIの中のoption.jsで、ユーザーネームを設定しています。そのユーザーネームをbrowserActionのjavascriptに渡したいのですが、うまくいきません。

いろいろなサイトの情報は、ContentScriptを使っていることを前提にしていますが、BrowserActionとOptionUIしか使ってないので、サイトの情報が使えるのかも分かりません。

javascript
1//option.js
2 
3window.onload = function(){
4  if(save.addEventListener){
5    save.addEventListener("click",savefun, false);　//saveとloadはoption.htmlのタグ
6    load.addEventListener("click", loadfun, false);
7  }
8}
9
10
11function savefun(){
12  var getter = document.getElementById("print").value;　　//printはoption.htmlのタグ
13  var items = {'value' : getter};
14
15  chrome.storage.local.set(items, function(){
16
17    if (chrome.extension.lastError !== undefined){
18      sec.ineerHTML = "NO";
19    }
20  });
21}
22

javascript
1//browser.js
2
3var sector = document.getElementById("tr"); //borwser.htmlのタグを取得
4console.log("ppppp");
5
6window.onload= function(){
7  if(clicker.addEventListener){
8    clicker.addEventListener("click", loader, false);　//clickerはbrowser.htmlのタグ
9  }
10}
11
12function loader(){
13  console.log("pl");
14  var keys = ['value'];
15
16  chrome.storage.local.get(keys, function(items){
17
18    if(chrome.extension.lastError !== undefined){
19      sector.innerHTML = "BAD";
20    }
21
22    else{
23      sector.innerHTML = items.value;
24    }
25
26  });
27
28}

試したこと

MessagePassingやLocalStorageにユーザーネームを保存して、そこから引き出すことを試してみました。

https://easyramble.com/chrome-extension-message-passing.html
https://developer.chrome.com/extensions/messaging
http://sdaigo.hatenablog.com/entry/20100107/1262828127

補足情報（FW/ツールのバージョンなど）

Chrome拡張機能のversionは2.0です。

OptionUI
https://developer.chrome.com/extensions/optionsV2

BroswerAction
https://developer.chrome.com/extensions/browserAction

umyu

2018/03/20 18:16 編集

質問文にうまくいかない部分のコードを記述してくださいな。Chrome拡張の場合、LocalStorageはSandbox環境になるため使えないので、非同期操作になりますが、chrome storage APIが使えるかと。

行動規範の内容に同意します

回答1件

ベストアンサー

OptionUIからbrowserActionのページにchrome.storage.local.get経由で値を渡すサンプルです、ご参考まで。

manifest.json

json
1{
2	"author": "うみゅ",
3	"description": "A118348",
4	"permissions": ["storage"],
5	"manifest_version": 2,
6    "options_ui": {
7        "page": "options.html",
8        "chrome_style": true
9    },
10    "browser_action": {
11        "default_popup": "browser.html"
12    },
13	"name": "A118348",
14	"homepage_url": "http://example.com/",
15	"version": "1.0.0"
16}

browser.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <meta name="format-detection" content="telephone=no">
7    <script src="./browser.js" defer></script>
8</head>
9<body>
10    <main role="main">
11        <form id="form_browser">
12            <h2></h2>
13            <fieldset>
14                <legend>Browser</legend>
15                <input type="text" id="user_name", name="user_name"  value="">
16            </fieldset> 
17        </form>
18    </main>
19</body>
20</html>

browser.js

JavaScript
1'use strict';
2(function (){
3    function loader() {
4        var keys = 'value';
5        chrome.storage.local.get(keys, (items) => {
6            console.log(`${new Date().toISOString()} ${loader.name}:${items.value}`);
7            const user_name = document.querySelector('#user_name');
8            user_name.value = items.value || '';
9        });
10    }
11    document.addEventListener('DOMContentLoaded', (event) => {
12        loader();
13    });
14})();

options.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <meta name="format-detection" content="telephone=no">
7    <script src="./option.js" defer></script>
8</head>
9<body>
10    <main role="main">
11        <form id="form_option">
12            <h2></h2>
13            <fieldset>
14                <legend>options</legend>
15                <input type="text" id="user_name", name="user_name" value="">
16            </fieldset> 
17        </form>
18    </main>
19    <nav>
20        <button id="load">Load</button>
21        <button id="save">Save</button>
22    </nav>
23</body>
24</html>

option.js

JavaScript
1'use strict';
2(function (){
3    function loadfun(){
4        chrome.storage.local.get('value', (items) => {
5            console.log(`${new Date().toISOString()} ${loadfun.name}:${items.value}`);
6            const user_name = document.querySelector('#user_name');
7            user_name.value = items.value || '';
8        });
9    }
10    function savefun(){
11        const user_name = document.querySelector('#user_name');
12        const getter = user_name.value;
13        chrome.storage.local.set({'value': getter}, () => {
14            console.log(`${new Date().toISOString()} ${savefun.name}:${getter}`);
15        });
16    }
17    document.addEventListener('DOMContentLoaded', (event) => {
18        const load = document.querySelector('#load');
19        load.addEventListener('click', (e) => {
20            loadfun();
21        }, false);
22        const save = document.querySelector('#save');
23        save.addEventListener('click', (e) => {
24            savefun();
25        }, false);
26        // ページ表示時
27        loadfun();
28    });
29})();