0
Chrome拡張機能の新機能です。私はいくつかのチュートリアルに続き、拡張を作成しました。私がしようとしている拡張機能はHOVERのweb要素を強調することです。私の問題は、ページが読み込まれたときにのみ拡張機能が動作することです。すでに開いているアクティブなタブでは機能しません。アイコンをクリックしたときに既に開いているアクティブなタブで拡張機能が動作していることを確認したい。Webページを再読み込みせずに拡張機能を有効にすると、コンテンツスクリプトがどのように機能するのですか？
マニフェスト：
{
\t "manifest_version": 2,
\t "name": "Highlight Web Element",
\t "description": "Extension for highlighting element in a web page",
\t "version": "1.0",
\t "content_scripts": [
\t \t {
\t \t \t "matches": ["http://*/*","https://*/*"],
\t \t \t "css": ["core.css"],
\t \t \t "js": ["contentscript.js"],
\t \t \t "run_at": "document_end",
\t \t \t "all_frames": false
\t \t }
\t ],
\t "background" : {
\t \t "scripts" : ["background.js"]
\t },
\t "browser_action": {
\t \t //"default_icon": "logo .png"
\t },
\t "permissions": ["tabs", "activeTab"]
}background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "testScript.js"});
});
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
\t console.log(sender);
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: request.greeting, "srcElementTagName" : request.srcElementTagName});
});contentscript.js
// Unique ID for the className.
var MOUSE_VISITED_CLASSNAME = 'plugin_crx_mouse_visited';
// Previous dom, that we want to track, so we can remove the previous styling.
var prevDOM = null;
// Mouse listener for any move event on the current document.
document.addEventListener('mousemove', function (e) {
var srcElement = e.srcElement;
if(prevDOM != srcElement) {
\t //console.log(srcElement.tagName);
\t chrome.runtime.sendMessage({greeting: "hello", "srcElementTagName" : srcElement.tagName}, function(response) {
\t \t console.log(response.farewell + " : " + response.srcElementTagName);
\t });
}
// Lets check if our underlying element is a DIV.
//if (srcElement.nodeName == 'DIV') {
\t // For NPE checking, we check safely. We need to remove the class name
\t // Since we will be styling the new one after.
\t if (prevDOM != null) {
\t prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
\t }
\t // Add a visited class name to the element. So we can style it.
\t srcElement.classList.add(MOUSE_VISITED_CLASSNAME);
\t // The current element is now the previous. So we can remove the class
\t // during the next iteration.
\t prevDOM = srcElement;
//}
}, false);core.css
.plugin_crx_mouse_visited {
background-color: #bcd5eb !important;
outline: 1px solid #5166bb !important;
}IはtestScript.jsに以下のコードを呼び出すことを試みました。しかし成功していない。
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
\t console.log(sender);
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: request.greeting, "srcElementTagName" : request.srcElementTagName});
});
こんにちは、Makyen - ご返信ありがとうございます。申し訳ありませんが、私の要件を誤解しています。 chrome：// extensionsから拡張機能を無効にしてもアイコンが表示されると思いました。私はそれに応じて私の質問を更新しました。ありがとう.. –
あなたの実際の問題は、拡張機能が読み込まれたときに、Chromeは* manifest.json *の指定された 'content_scripts'をすでに開いている' matches'パターンと一致するタブに挿入しないということです。あなたのコードは現在、あなたの* contentscript.js *スクリプトが 'browserAction'ボタンがクリックされる前に既に挿入されていることを前提としています。これを解決するには複数の方法があります。ユーザーが 'browserAction'ボタンをクリックしてユーザーのやりとりが始まる*場合、* manifest.json *の代わりに* contentscript.js *に' executeScript（） 'を注入する必要があります。 – Makyen