質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.80%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,016

score 8

 前提・実現したいこと

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

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

//option.js

window.onload = function(){
  if(save.addEventListener){
    save.addEventListener("click",savefun, false); //saveとloadはoption.htmlのタグ
    load.addEventListener("click", loadfun, false);
  }
}


function savefun(){
  var getter = document.getElementById("print").value;  //printはoption.htmlのタグ
  var items = {'value' : getter};

  chrome.storage.local.set(items, function(){

    if (chrome.extension.lastError !== undefined){
      sec.ineerHTML = "NO";
    }
  });
}
//browser.js

var sector = document.getElementById("tr"); //borwser.htmlのタグを取得
console.log("ppppp");

window.onload= function(){
  if(clicker.addEventListener){
    clicker.addEventListener("click", loader, false); //clickerはbrowser.htmlのタグ
  }
}

function loader(){
  console.log("pl");
  var keys = ['value'];

  chrome.storage.local.get(keys, function(items){

    if(chrome.extension.lastError !== undefined){
      sector.innerHTML = "BAD";
    }

    else{
      sector.innerHTML = items.value;
    }

  });

}

 試したこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • umyu

    2018/03/21 03:15 編集

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

    キャンセル

回答 1

checkベストアンサー

0

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

manifest.json

{
    "author": "うみゅ",
    "description": "A118348",
    "permissions": ["storage"],
    "manifest_version": 2,
    "options_ui": {
        "page": "options.html",
        "chrome_style": true
    },
    "browser_action": {
        "default_popup": "browser.html"
    },
    "name": "A118348",
    "homepage_url": "http://example.com/",
    "version": "1.0.0"
}

browser.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <script src="./browser.js" defer></script>
</head>
<body>
    <main role="main">
        <form id="form_browser">
            <h2></h2>
            <fieldset>
                <legend>Browser</legend>
                <input type="text" id="user_name", name="user_name"  value="">
            </fieldset> 
        </form>
    </main>
</body>
</html>

browser.js

'use strict';
(function (){
    function loader() {
        var keys = 'value';
        chrome.storage.local.get(keys, (items) => {
            console.log(`${new Date().toISOString()} ${loader.name}:${items.value}`);
            const user_name = document.querySelector('#user_name');
            user_name.value = items.value || '';
        });
    }
    document.addEventListener('DOMContentLoaded', (event) => {
        loader();
    });
})();

options.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <script src="./option.js" defer></script>
</head>
<body>
    <main role="main">
        <form id="form_option">
            <h2></h2>
            <fieldset>
                <legend>options</legend>
                <input type="text" id="user_name", name="user_name" value="">
            </fieldset> 
        </form>
    </main>
    <nav>
        <button id="load">Load</button>
        <button id="save">Save</button>
    </nav>
</body>
</html>

option.js

'use strict';
(function (){
    function loadfun(){
        chrome.storage.local.get('value', (items) => {
            console.log(`${new Date().toISOString()} ${loadfun.name}:${items.value}`);
            const user_name = document.querySelector('#user_name');
            user_name.value = items.value || '';
        });
    }
    function savefun(){
        const user_name = document.querySelector('#user_name');
        const getter = user_name.value;
        chrome.storage.local.set({'value': getter}, () => {
            console.log(`${new Date().toISOString()} ${savefun.name}:${getter}`);
        });
    }
    document.addEventListener('DOMContentLoaded', (event) => {
        const load = document.querySelector('#load');
        load.addEventListener('click', (e) => {
            loadfun();
        }, false);
        const save = document.querySelector('#save');
        save.addEventListener('click', (e) => {
            savefun();
        }, false);
        // ページ表示時
        loadfun();
    });
})();


スクリプトはポップアップ画面を右クリック→検証を押下すると開発者ツールが表示されます。

■参考情報

  1. chrome.storage を利用したchromeへのデータ保存
  2. DOMContentLoaded
  3. テンプレート文字列

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/22 23:47

    参考のソースコードを真似したらできました。助かりました、ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る