3

私は、ブラウザー ポップアップのテキスト ボックスから入力を取得し、その入力を使用して web ページをフィルター処理するために、その入力を background.js に中継するコードに取り組んでいます。

最初に background.js のフィルタリングをハードコーディングすると機能します (background.js は最初に 1 回実行されるため) が、popup.js のテキスト ボックスから入力を受け取る関数内にフィルタリングを配置すると、動作しません。

popup.js

$(document).ready(function(){
    $('#zim').click(function(){

    // Get User Input in Text Box
    var author = document.getElementById('author').value;

    // Pass author variable to background.js
    chrome.extension.getBackgroundPage().StartFiltering(author);


    });
});

background.js

function StartFiltering(person){

    console.log("Starting Filtering");
    console.log("person: " +person);

    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( ".text-upper:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
    $( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.postlist-dense').remove(); 

};

マニフェスト

{
  "name": "Filter",
  "description": "Filter out authors on homepage",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["jquery.js","background.js"],
    "persistent": false
  },
  "icons": {
      "128": "128.png"
   },
  "browser_action": {
    "default_title": "Filter",
    "default_icon": "filter.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2,
   "content_scripts": [
    {
      "js": ["jquery.js","background.js"],
      "matches": [ "http://example.com/*"]
    }
  ]
}

background.js では、jQuery の 3 行を関数の外に置き、「person」変数にハードコードして拡張機能をリロードすると、Web サイトが正しくフィルタリングされます。StartFiltering は確実に実行され、ユーザーからの「作成者」入力は確実に取得されますが、background.js は開始時にのみ実行されるため、ファイルを更新することを知らないのではないでしょうか? わからない！JS とコーディング全般にかなり慣れていません。

ここで検索しましたが、同じ問題を抱えている人が見つかりません！助けてくれてありがとう！

編集 - 解決しました!

それで、これが私がこれを機能させる方法です...

ExpertSystem が background.js を 2 回使用していることを指摘した後、マニフェストとファイル システムをクリーンアップして、background.js、content.js、popup.js、マニフェストの 4 つのファイルを作成しました。マニフェストの content_scripts セクションには、以前のように background.js の代わりに jquery.js と content.js がありました。

ユーザーがポップアップ テキスト ボックスに値を入力するたびに popup.js が background.js にメッセージを送信するようにしました。これは次のように非常に簡単に行われました。

popup.js

chrome.runtime.sendMessage({type: "new author", author:author});

私は background.js にメッセージをリッスンさせ、メッセージ タイプが popup.js から送信されたものと一致した場合、ブロックされた作成者の値を配列に格納します (最終的に作成者のリストを保持してフィルター処理する予定だったため)。 )、配列をメッセージとして送信します。

background.js

chrome.runtime.onMessage.addListener(
    function(request,sender,sendResponse) {

        if(request.type == "new author") {
            blocked.push(request.author) 
        }

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){

           chrome.tabs.sendMessage(tabs[0].id,{filter:"author",blocked:blocked})

        });
});

次に、content.js にメッセージをリッスンさせました。

content.js 

chrome.runtime.onMessage.addListener(function(msg,sender){
    if (msg.filter == "author"){

        for (var i=0;i<msg.blocked.length;i++){
            startFiltering(msg.blocked[i]);     
        }   
    }
});

まだ微調整が必​​要ですが、3 ページすべてが通信できるようになりました。

4

1 に答える 1

4

背景ページ (実際にはイベント ページ) とコンテンツ スクリプトの両方を
使用している問題。そのため、 http://example.com/*background.jsにアクセスすると、実際には の 2 つの別個のインスタンスがあります。1 つは Web ページに挿入され、もう 1 つは生成された背景ページに挿入されます。(ちなみに、開発者モードを有効にすると、chrome://extensions/で背景ページにアクセスできます。)background.js

ソリューション

  1. background-pageおよびcontent スクリプトと同じファイルを使用しないでください。
  2. popup.htmlWeb ページに挿入されたコンテンツ スクリプトにメッセージを渡します。
  3. コンテンツ スクリプトにその魔法 (別名フィルタリング) を実行させます。

例(~テストされていないコードの警告~):

// In popup
var author = ...;
chrome.tabs.getCurrent(function(currentTab) {
  chrome.tabs.sendMessage(currentTab.id, {
    action: 'filter',
    person: author
  });
});

.

// In content script
function filter(person) {
  $('a:contains(' + person + ')').
    closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').
    remove();
  ...
}

chrome.runtime.onMessage.addListener(function(msg) {
  if ((msg.action === 'filter') && msg.person) {
    filter(msg.person);
  }
});
于 2013-10-23T21:00:43.087 に答える