Chrome拡張機能：コードを挿入するリファラーがfacebookの場合

Question

リファラーがFacebookであるが動作していない場合、コードにコードを挿入したいと考えています。これは私が以下に使用したコードです。

manifest.jsonを

{ 
 
    "name": "Injecta", 
 
    "version": "0.0.1", 
 
    "manifest_version": 2, 
 
    "description": "Injecting stuff", 
 
    "homepage_url": "http://danharper.me", 
 
    "background": { 
 
    "scripts": [ 
 
     "background.js" 
 
    ], 
 
    "persistent": true 
 
    }, 
 
    "browser_action": { 
 
    "default_title": "Inject!" 
 
    }, 
 
    "permissions": [ 
 
    "https://*/*", 
 
    "http://*/*", 
 
    "tabs" 
 
    ] 
 
}

私はこの問題はここにあると思います。私は、URLの参照元がFacebookの場合は、コードを注入したい。

Background.js

var x = document.referrer; 
 
if (x === "www.facebook.com") { 
 

 
// listen for our browerAction to be clicked 
 
chrome.browserAction.onClicked.addListener(function (tab) { 
 
\t // for the current tab, inject the "inject.js" file & execute it 
 
\t chrome.tabs.executeScript(tab.ib, { 
 
\t \t file: 'inject.js' 
 
\t }); 
 
}); 
 
}

Inject.js

// this is the code which will be injected into a given page... 
 

 
(function() { 
 

 
\t // just place a div at top right 
 
\t var div = document.createElement('div'); 
 
\t div.style.position = 'fixed'; 
 
\t div.style.top = 0; 
 
\t div.style.right = 0; 
 
\t div.textContent = 'Injected!'; 
 
\t document.body.appendChild(div); 
 

 
\t alert('inserted self... giggity'); 
 

 
})();

あなたが私のために働くコードを提供できれば嬉しいです。

Answer 1

あなたの条件に2つのビットがあります：

1. リファラするFacebook（FB）が存在するかどうかの確認、
2. リファラがFBである場合、スクリプトを注入するが。

ページ（すなわち、リファラー）のコンテキストがバックグラウンドスクリプトに直接利用できないので、注入コンテンツスクリプトを介してブラウザ・ページで発生する最初のニーズ。

すべてのページに簡単なリファラ検出器コンテンツスクリプトを挿入できます。 referrer = FBが検出されると、メッセージをバックグラウンドスクリプトに送信します。バックグラウンドスクリプトは、FB専用スクリプトを注入します。

また、すべてのページに完全なスクリプトを挿入することもできますが、参照元のテストの後ろに有効ビット（inject.jsコード）を隠すことは可能です。

どちらの方法でも、注入されたコンテンツスクリプトで参照元の検出が行われる必要があります。

私が望むなら、私はコードを助けることができますが、私はそれがとても簡単だと感じています。 @wOxxOmが指摘しているように、コードよりも、アーキテクチャの点では問題ありません。

アップデート2016年11月8日：

再読み込みあなたのコードを、そして何をするつもりは

1. リファラーがFacebookのあるときに、ページ上のスクリプトを注入することであると思われます、
2. ユーザーがブラウザのアクションを押して注入を要求しました。

このようなシナリオでは、以下のコードを用意しました。

1. すべてのページに基本スクリプトを挿入します。通常、マニフェストに一覧表示することで行われます。
2. ブラウザの操作を押すと、常に挿入されたスクリプトに、そのタブのリファラーがFacebookであるかどうかを尋ねるメッセージを送信します。
3. リファラがfacebook - >メインスクリプトをすぐに挿入する場合、スクリプトはtrueと応答します。

これが役に立ちます。

乾杯！

追加コード：

//更新マニフェストは - 常に

{ 
    "name": "Injecta", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "description": "Injecting stuff", 
    "homepage_url": "http://danharper.me", 
    "background": { 
    "scripts": [ 
     "background.js" 
    ], 
    "persistent": true 
    }, 
    "browser_action": { 
    "default_title": "Inject!" 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["<all_urls>"], 
     "js": ["js/inject_all_script.js"] 
    } 
    ], 
    "permissions": [ 
    "https://*/*", 
    "http://*/*", 
    "tabs" 
    ] 
} 

// background.js

// listen for our browerAction to be clicked 
chrome.browserAction.onClicked.addListener(function (tab) { 
    // send a message to the 'always-injected' script to ask if the page referrer is facebook 
    chrome.tabs.sendMessage(tab.id, {"type": "isFacebook?"}, function(response){ 
    if(response.answer){ 
     // if the referrer is facebook, inject the "inject.js" file & execute it 
     chrome.tabs.executeScript(tab.ib, { 
     file: 'inject.js' 
     }); 
    } 
    }); 
}); 

// inject_all_script.js

// this is the code which will be injected into *all* pages 
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){ 
    if(sender.id === chrome.runtime.id && message.type && message.type === "isFacebook?"){ 
    sendResponse({"answer": /https?\/\/(www)?\.facebook\.com/i.test(document.referrer)}); 
    } 
}) 

を注入していますコンテンツのスクリプトを追加しました

// selective-injected.js

// this is the code which will be injected into pages that have facebook as referrer... 
(function() { 

    // just place a div at top right 
    var div = document.createElement('div'); 
    div.style.position = 'fixed'; 
    div.style.top = 0; 
    div.style.right = 0; 
    div.textContent = 'Injected!'; 
    document.body.appendChild(div); 

    alert('inserted self... giggity'); 

})();