2017-02-05 2 views
0

この問題は一種の問題です。だから、私は可能な限り徹底しようとします。Chrome拡張機能のJavaScriptファイル間でユーザーの入力を転送しますか?

これは、ウェブサイトとやり取りできるChrome拡張機能を作成する方法を学習する際にこれを行います。

これはユーザーが入力したものである入力フィールドを入力し、Webサイトの特定の部分をそのテキストに置き換えることです。私はIDがあり、getElementByIdで簡単に編集できるので、Message Passingに記載されている「ワンタイムリクエスト」を使用しています。

ボタンワンクリックで簡単なワンタイムリクエスト文を置き換えるのは簡単ですが、ユーザーの入力を取得してドキュメントに挿入しようとすると問題が発生します。ここで

は私のコードです:

manifest.jsonを

{ 
    "manifest_version": 2, 
    "name": "document-editor-test", 
    "version": "1.0", 

    "permissions": [ 
     "activeTab", 
     "cookies", 
     "storage" 
    ], 
    "browser_action": { 
     "default_title": "Site Text Editor", 
     "default_popup": "menu.html" 
    } 
} 

content.js

document.getElementById('button').addEventListener('click', function (evt) { 
    var inputText = document.getElementById('input').value; 
    var theValue = inputText; 
    chrome.storage.local.set({'value': theValue}, function(){ 
     message('value saved'); 
    }); 
    chrome.tabs.executeScript({ file: 'replace.js' }) 
}, false); 

replace.js

var item = chrome.storage.local.get(null, function(){ 
    message('Value gotten') 
}) 
document.getElementById('simple').innerHTML = item; 

menu.html

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset="utf-8"> 
    </head> 

    <style> 
     body {width: 200px;} 
     #text{ font-size: 13px; text-align: center;} 
    </style> 

    <body> 
     <input id='input' type="text" placeholder="Text Here"> 
     <button id='button' class='button button'>Ok</button> 
     <script src="content.js"></script> 
    </body> 
</html> 

私は値を保存し、ファイルを経由して、それを解析するために簡単に保存するスクリプトを使用しようと、それだけでundefinedをスクリプトプリントアウトできます。

入力値を文書に渡す方法は何ですか?

+0

、参照してください:[私は非同期呼び出しからの応答を返すにはどうしますか?] (//stackoverflow.com/q/14220321) – Makyen

答えて

1
  1. 延長ポップアップがタブで開いたWebページに関連していない、別のページである:あなたのポップアップスクリプト名が間違っ/誤解を招くです:それはコンテンツスクリプトではありません、例えばに名前を変更menu.js

  2. 関数コールバックを受け入れるChrome APIメソッドは、asynchronousであり、関数コールバック内の値を返します。可能なパラメータを確認するには、documentationで確認してください。

    var item; 
    
    chrome.storage.local.get('value', function(data) { 
        item = data.value; 
        document.getElementById('simple').innerHTML = item; 
    }); 
    
  3. ポップアップであなたのコードは、競合状態が発生する可能性があります:あなたのコンテンツのスクリプトは、それが設計によってundefinedを返しますので、キー名を指定して、代わりにコールバック内の値を使用し、誤って呼び出される中

    chrome.storage.local.get非同期APIでは、値が保存される前にコンテンツスクリプトが注入される(理論的には可能です)。チェーンネスティングによって通話:あなたは `chrome.storage.local.getを()`を使用しようとしているかについて

    chrome.storage.local.set({'value': theValue}, function() { 
        message('value saved'); 
        chrome.tabs.executeScript({ file: 'replace.js' }); 
    }); 
    
関連する問題