2017-01-28 13 views
1

クロム拡張機能が新しいタブで開き、開いているウィンドウとタブの情報が読み込まれますが、新しいタブやウィンドウを取得するためには更新する必要があります開かれた。新しいタブとウィンドウ用のChrome拡張機能にイベントリスナーを追加

はここでマニフェストファイルからのコードです:

"background": { 
    "page": "background.html", 
    "persistent": true 
    }, 
"content_security_policy": "script-src 'self' 'unsafe-eval' https://code.jquery.com; object-src 'self'", 

"permissions": [ 
    "contextMenus", 
    "notifications", 
    "tabs", 
    "clipboardWrite", 
    "unlimitedStorage" 
], 
"content_scripts": [{ 
     "matches": ["*://*/*"], 
     "js": ["jan13.js", "background.js"], 
     "css": ["jan13.css"] 
     } 

background.htmlページには、2つのスクリプト「jan13.js」と「background.js」を呼び出します。

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
<script src="jquery.min.js"></script> 
<script src="background.js"></script> 
<script src="jan13.js"></script> 
</body> 
</html> 

ファイルはちょうどこのような独自のタブに拡張子を切り開く "background.js":

chrome.browserAction.onClicked.addListener(function(tab) { 
chrome.tabs.create({'url': chrome.extension.getURL('popup.html'), 'selected': true}); 
}); 

そして "jan13.js" は、すべての実際の作業を行います。

$(document).ready(function() { 

chrome.windows.getAll({populate:true},function(windows){ 

    for (i=0; i < windows.length; i++) { 
     a = (i+1); 

     $('<div/>', { 
      id: 'win'+a, 
     }).attr('class', 'box1').html("<h3>Window"+a+"</h3>").appendTo('.container'); 

     windows[i].tabs.forEach(function(tab){ 

      var favic = tab.favIconUrl; 

      var link = $('<a>', { 
       text:tab.title, 
       href:tab.url, 
       }); 
      link.attr("target", "_blank"); 
      $('#win'+a).append(link); 

      $(link).prepend($('<img>', {id:'favic', src: favic})); 
     }); 
    }; 

    $('<div/>').attr('class', 'button').text("Toggle").appendTo('.box1'); 

    $('.button').click(function() { 
     var b = $(this).parent().closest('div'); 
     $(b[0]).toggleClass("box1a"); 
    });  
    }); 
}); 

私は "background.js" および/または "background.html" にこのコードを入れて試してみた:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 
    $.getScript("jan13.js"); 
}); 
chrome.tabs.onCreated.addListener(function(tab) {  
    $.getScript("jan13.js"); 
}); 

しかし、私は次のエラーを取得する:それは、次のコンテンツセキュリティポリシーの指示に違反しているため

はインラインスクリプトを実行するために拒否:「スクリプト-srcの 『自己』 『安全ではない-evalの』 https://code.jquery.com」。インライン実行を有効にするには、 'unsafe-inline'キーワード、ハッシュ( 'sha256-VCQyoq7QBv4UrBn0VODLZE8rJZdjIt7Kb3PziCSqIXM =')またはnonce( 'nonce -...')が必要です。

私も定期的にこのエラーが出る:

キャッチされないにReferenceError:$は

が定義されていません。しかし、それが実行されているから拡張子を停止しません。

私はこのようなマニフェストに「background.js」および/または「jan13.js」を入れてみてください:

"background": { 
    "scripts": ["background.js", "jan13.js"], 
    "persistent": true 
    }, 

拡張子がまったく開きません。私はツールバーのアイコンをクリックしても何も起こりません。だから私は代わりに "background.html"に入れました。それは私に巻き込まれているようですが、私がそれを働かせる唯一の方法です。

また、元の質問は、拡張機能が新しいタブまたはウィンドウを自動的に開くようにeventListenerを追加する方法です。ページを更新すると動作します。

編集:これにマニフェストファイルを変更:

{ 
"manifest_version": 2, 
"name": "Session Sync", 
"version": "0.1.0", 
"description": "Sync browser sessions", 
"author": "Mischa Bertrand-Chetty", 
"browser_action": { 
    "default_title": "Starting Session Sync..." 
    }, 
"background": { 
    "scripts": ["jquery.min.js","background.js", "jan13.js"], 
    "persistent": true 
    }, 
"content_security_policy": "script-src 'self' 'unsafe-eval' https://code.jquery.com; object-src 'self'", 

"permissions": [ 
    "contextMenus", 
    "notifications", 
    "tabs", 
    "clipboardWrite", 
    "unlimitedStorage" 
], 
"content_scripts": [{ 
     "matches": ["*://*/*"], 
     "css": ["jan13.css"] 
     } 
    ], 
"incognito": "spanning" 
} 

良いニュースは、私はもう参照エラーを取得しないです。しかし、元の問題は、それは新しいタブやウィンドウを聞いていないことはまだそこにある。私はまだ新しいタブとウィンドウを取得するためにページを更新する必要があります。

+0

jqueryファイルをダウンロードすると、ローカルフォルダが保存され、エクステンションにダウンロードしたファイルが参照されます。 – Maharshi

+0

私はそうしました。そのため、 "background.html"の "jquery.min.js"とメインのhtmlファイルを参照しています。 – Mitch

+0

「background」の代わりに* background.html *を使用する理由はありますか?{"scripts":["jquery.min.js"、 "background.js"、 "jan13.js"]、 "persistent":true} '? – Makyen

答えて

0

スクリプトを再ロードするのではなく、DOM要素を名前付き関数に挿入するコードを、onCreatedハンドラとonUpdatedハンドラのタブから呼び出せるように移動します。おそらく、スクリプト全体を再読み込みして毎回完全に再スキャンすることも望まないでしょう。更新/作成された各タブごとに1回実行したいと思うかもしれません。スクリプトをリロードしないので、CSPルールは必要ありません。background.jsで

、あなたの関数を入れて、それを呼び出すハンドラ:

function scanTabs() { 
    chrome.windows.getAll({populate: true}, function(windows) { 
..etc.. 
} 
$(document).ready(scanTabs); 
chrome.tabs.onUpdated.addListener(scanTabs); 
chrome.tabs.onCreated.addListener(scanTabs); 

あなたは全くjan13.jsを必要としません。

うまくいけば、それは正しい軌道上であなたを得るのに十分です。

+0

だから、 "function myFunction {.....};"に "jan13.js"の "$ document.ready(function)"の後にすべてを入れますか?その関数を "background.js"からどのように呼び出すのですか?私がしようとしているのは、私に "関数が定義されていません"というものを与え、ブランクのタブをロードするだけです。 – Mitch

+0

私はいくつかの情報で答えを更新しました。 –

+0

お世話になりました@Dim Dierksさん。今は4回すべてを繰り返さないようにしなければなりません。私はforEach関数を置き換える必要があると思います。なぜなら、明らかにそれを破壊する良い方法はないからです。そして私はforループに "if"文を置くことは良い習慣であるとか効率的だとは思わない。現時点では、関数全体を4回実行しており、新しい "win + a div"を繰り返し作成することはできませんでしたが、それでも同じタブを使います。 – Mitch

関連する問題