0

ローカルの 'blanksite.html'で新しいタブを作成し、緑色に変わるいくつかのjavascriptコードを挿入するchrome拡張機能を作成しようとしています。ここに私がこれまで持っているものがあります。Chrome拡張機能の新しく作成されたタブにJavascriptを挿入

background.js

chrome.browserAction.onClicked.addListener(function(activeTab){ 

    chrome.tabs.create({'url': chrome.extension.getURL("blanksite.html") }, function(tab) { 
    chrome.tabs.executeScript(tab.id, { 
     code: 'document.body.style.backgroundColor="green"' 
    }); 
    }); 
}); 

manifest.jsonを

{ 
    "manifest_version": 2, 

    "name": "Open Green Google Tab", 
    "description": "This extension opens a Green Google tab.", 
    "version": "1.0", 

    "background":{ 
    "scripts": ["background.js"] 
    }, 

    "browser_action": { 
    "default_icon": "icon.png" 
    }, 
    "permissions": [ 
    "tabs", 
    "activeTab" 
    ] 
} 

これは新しいタブに "blanksite.html"(文字通り空のhtmlファイル)を開きますが、タブ緑色に変わりはありません。

私はChrome extension: create tab then inject content script into itで他の回答を読んでいるので、なぜこれが機能しないのか分かります(chrome:// extensionsページに直接コードを挿入できません)。私は他の回答に掲載されたソリューションを私のために働かせることができませんでした。私が仕事をしたいものを作ることができる、明確で完全な小さなコードがありますか?

私はメッセージングが非常にうまく理解できないのではないかと心配しています。そのため、より包括的な説明をいただければ幸いです。

答えて

1

なぜバックグラウンドページからblanksite.htmlにメッセージを渡すのが成功しないのかよく分かりません(作成時にblanksite.htmlのメッセージを聞くのは遅すぎるかもしれません)。

blanksite.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <script src="blanksite.js"></script> 
</body> 
</html> 

blanksite.js

chrome.runtime.sendMessage({src: "newtab"}, function(response) { 
    if(response.action === 'changeColor') { 
     document.body.style.backgroundColor = 'green'; 
    } 
}); 

しかし、メッセージblanksite.htmlから通過し、それに応答して、対応するアクションを実行を開始すると、次のサンプルコードを参照して、うまく機能します

background.js

chrome.browserAction.onClicked.addListener(function(activeTab) { 
    chrome.tabs.create({url: chrome.runtime.getURL('newtab.html')}); 
}); 

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
    if(request.src === 'blanksite') { 
     sendResponse({action: 'changeColor'}); 
    } 
}); 
+0

素晴らしい!しかし、この作業をするためにリスナーに遅れを加えなければなりませんでした。そうでなければ何もしませんでした。 –

関連する問題