2016-11-04 12 views
1

クロム拡張機能を使用して、機能を選択した後にページをリフレッシュしてページを変更する際に、ユーザーが「生き延びる」ことができる方法を質問します。クロムエクステンション - サイト全体に設定を保存してページをリフレッシュする

たとえば、目的のサイトの背景色を変更するかなり一般的な背景色変更設定を使用します。有効化ボックスにチェックを入れ、背景が選択されたオプションに変更されると、ページの変更またはリフレッシュ後も永続的なままになりません。私は誰かがdeveloper.chromeサイトよりも役立つ何らかの有益なリソースを手伝ってくれるかどうかを尋ねるところです。

編集:私の悪い私の質問のはるかに良い例です。 Twitchの「BetterTTV」のような拡張機能を知っている人は、オプションのメニューがあります。これらのオプションの1つは、以前に言及した「夜間」オプションで、サイト全体を白や黒のテキストなどの「夜間の色」に点灯させます。このオプションを有効にすると、サイト全体が表示され、Chromeが終了しても、次回の変更を行うことができます。何が言われているのかを正しく理解している場合、Chromeストレージを使用すると、無効にされるまでユーザーがページ上で作成できるような操作が保持されます。

ありがとうございます。

+0

コンテンツスクリプトは、ウェブページがタブ内に残っている(すなわち、リフレッシュせずに、または新しいページに変更する)。これを長くすることはできません。バックグラウンドスクリプトは、Chromeの起動から終了までにChromeが実行されている間存在できます。設定を保存したい場合は、['chrome.storage'](https://developer.chrome.com/extensions/storage)を使うか、設定をバックグラウンドページに保存してください。ページを更新したときにコンテンツスクリプトが再び開始されるとき、またはユーザーが新しいページに移動するときに、設定を読み込むか、バックグラウンドページから取得できます。 – Makyen

+0

@Makyen現在の拡張機能全体を通して、特定の「夜間」モードを有効にすると、サイト全体が反転した色になります。エクステンションの動作が1ページになるのではなく、それが次のページで発生したことはありません。あなたが提案したものを使って、これはそうするのですか? – Fearcustard

+0

あなたのプログラムによって異なります。あなたがそのコメントで何を求めているのか本当に分かりません。コンテンツスクリプトの設定を変更している場合は、情報スクリプトをどこかで取得しない限り、それは長く続くでしょう。これは 'chrome.storage'または(バックグラウンドスクリプトに情報を伝える)ことを意味します(https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts)。いずれにしても、コンテンツスクリプトが次に実行されるときに設定をアクティブにしたい場合(リフレッシュ、ナビゲート)、設定を元に戻す必要があります。 – Makyen

答えて

1

コンテンツスクリプトは、ウェブページがタブ内に残っている(つまり、リフレッシュまたは新しいページへのナビゲートが行われない)のと同時に生き残ることができます。これを長くすることはできません。バックグラウンドスクリプトは、Chromeの起動から終了までにChromeが実行されている間存在できます。設定を保存する場合は、chrome.storageを使用するか、設定をバックグラウンドページに保存します。ページを更新したときにコンテンツスクリプトが再び開始されるとき、またはユーザーが新しいページに移動するときに、設定を読み込むか、バックグラウンドページから取得できます。 chrome.storageを使用すると、オフにするまでこのオプションを保持できます。 chrome.storageを使用すると、Chromeを終了して後で再起動しても、引き続きオプション情報を利用できます。バックグラウンドページの変数にデータを保存するだけでは、Chromeを終了して再起動してもデータは保持されません。

コンテンツスクリプトの設定を変更している場合は、情報をどこかに取得しない限り、コンテンツスクリプトの期間だけ有効になります。つまり、chrome.storageまたはmessaging the information to a background scriptを意味します。いずれにせよ、コンテンツスクリプトが次に実行されたとき(リフレッシュ、ナビゲート)に設定を有効にする場合は、設定を元に戻す必要があります(chrome.storageから読むか、バックグラウンドスクリプトからメッセージを受け取るなど)。

一般に、コンテンツスクリプトのオプションを変更することは、おそらく良い考えではありません。そのようなことがコンテンツスクリプトでは一般的ではありません。一方で、あなたがやっていることに応じて、コンテンツスクリプトであなたの拡張機能のオプションのいくつかを変更するのが最も適切かもしれません。

これを整理するには、自分が何をしているかによって決まります。さらに進んでいくには、より多くの情報が必要です(たとえば、自分が行っていることを示すコードなど)。コンテンツスクリプトからは通常は変更されませんが、設定を保持することに関する多くの例があります。設定はほとんどoptions pages、ポップアップなどから変更されます

機能が「有効になっているボックスをチェックし、背景が選択されたオプションに変更されました」のような単純な機能の場合、コンテンツスクリプトで選択が行われるのは簡単ではありません良いアイデア。その場合は、browser_actionボタンがあります。これはトグルか、チェックボックスにチェックを入れることができるポップアップを表示します(複数のオプションがある場合)。その後、バックグラウンドスクリプトは、機能が有効になっているときにのみchrome.tabs.executeScript()を使用してコンテンツスクリプトを挿入します。

更新:あなたは複数のオプションを持つことができるようになりますポップアップ、または上のアドオンサイトのリストを使用する必要がありますように
、あなたの質問に追加した新しい情報に基づいて、それが聞こえます有効になっています。例をお探しの場合はChrome developer options page exampleをご覧ください。あなたはthis questionショーに興味を持って、私の答えのように単一のページを使用している場合、あなたのmanifest.jsonを

"browser_action": { 
    "default_icon": { 
     "48": "myIcon.png" 
    }, 
    "default_title": "Show panel", 
    "default_popup": "options.html" 
}, 

に以下を追加することにより、オプションページであることに加えて `browser_actionボタンでポップアップとしてあることを持つことができますオプションページとポップアップの両方。オプションページのデータをchrome.storageに取得して読み込む方法を示します。ポップアップからバックグラウンドページに情報を伝える4つのやや異なる方法を示しているので、潜在的に望ましいものより少し複雑です。テスト済みで、ChromeとFirefoxの両方で動作します。ここで

は(オプションページ/ポップアップの現在の値を表示するために)chrome.storageからの読み出しデータの例(useDirectemailAddress)で、DOMに情報を入れる:

// Restores select box and input using the preferences 
// stored in chrome.storage. 
function useStoredOptionsForDisplayInDOM() { 
    chrome.storage.local.get({ 
     useDirect: 0, 
     emailAddress: '', 
     enabled: false 
    }, function(items) { 
     //Store retrieved options as the selected values in the DOM 
     document.getElementById('useDirect').value = items.useDirect; 
     document.getElementById('email').value = items.emailAddress; 
     document.getElementById('enabled').checked = items.enabled; 
    }); 
} 

どのようにそれらのこれがあります同じ値がchrome.storageに格納されています。

function saveOptions() { 
    let useDirectValue = document.getElementById('useDirect').value; 
    useDirectValue = +useDirectValue; //Force to number, not a string 
    let email = document.getElementById('email').value; 
    let functionEnabled = document.getElementById('enabled').checked; 
    chrome.storage.local.set({ 
     useDirect: useDirectValue, 
     emailAddress: email, 
     enabled: functionEnabled 
    }); 
} 

そしてHTMLの<body>

<body> 
    <div id="optionsArea"> 
     Use direct method: 
     <select id="useDirect"> 
      <option value="0">Option 0</option> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">option 3</option> 
     </select> 
     <div>Email: 
      <input id="email"></input> 
     </div> 
     <label> 
      <input type="checkbox" id="enabled"> 
      Enable functionality. 
     </label> 
    </div> 
    <script src="options.js"></script> 
</body> 
+0

拡張機能を使用すると、そのオプションが有効になっているときに背景色を変更するなどの結果しか得られません。無効になっているのは私が考え出すところです。現在のページをアクティブにするのではなく、サイト全体にそのようなことを保持することが、私が探しているものです。 – Fearcustard

+0

@Fearcustard、*ウェブサイト全体(ドメイン?)、またはすべてのサイトの電源を切るまでオンにしますか?このウェブサイトへの訪問中、またはウェブサイトへのすべての訪問中にオフにされるまでのみ? – Makyen

+0

たとえば、現在のWebサイト(stackoverflow)では、実行中の例を使用して背景を変更し、無効にするまで背景を変更するなどのオプションがあります。ページを変更してサイト全体をアクティブにして、サイトを閉じます。 – Fearcustard

関連する問題