ページのロードではなく、ボタンのクリックでcontent.jsを実行

Executing Chrome extension onclick instead of page loadの複製ではなく、ユーザーがアイコンを押したときではなく、popup.htmlのボタンを押してスクリプトを実行する必要があるためです。ページのロードではなく、ボタンのクリックでcontent.jsを実行

これは私の最初のクロムエクステンションで、content.jsはページの読み込み時に動作するようになっていますが、ユーザーがpopup.htmlのボタンを押すと実行するだけです。私はあなたがmanifest.jsonにrun_atを指定することができると知っていますが、ユーザがボタン（アイコンではなく）をクリックしたときにのみ実行され、私はpageActionを使用していますので、文字 'g'を含んでいないURL上に出てきます。したがって、私のbackground.jsの仕様です。私はbackground.jsとcontent.jsの間のコミュニケーションに関して何かが欠けているに違いないと思っていますが、誰かが私が見逃していることを説明することができれば、とても失礼だと感じています。

{ 
"manifest_version": 2, 

"name": "my extension", 
"description": "it doesnt work", 
"version": "0.1", 
"background": { 
"scripts": ["background.js"], 
"persistent": false 
}, 

"permissions": [ 
"declarativeContent" 
], 

"page_action": { 
    "default_popup": "popup.html" 
    }, 

"icons" : { "16": "16.png", 
      "48": "48.png", 
      "128": "128.png" }, 

"content_scripts": [ 
{ 
    "js": ["content.js"], 
    "matches": ["<all_urls>"], 
    "run_at": "document_end" 
    } 
    ] 
    }

Background.js：ここ

は私のmanifest.jsonをがある

chrome.runtime.onInstalled.addListener(function() { 
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() { 
chrome.declarativeContent.onPageChanged.addRules([ 
    { 
    conditions: [ 
     new chrome.declarativeContent.PageStateMatcher({ 
     pageUrl: { urlContains: 'g' }, 
     }) 
    ], 
    chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(null, {file: "content.js"}); 
    }); ] 
    } 
    ]); 
    }); 
    });

Content.js：

document.addEventListener("DOMSubtreeModified", function(event){ 
    if(document.getElementsByClassName(".class")) { 
     var x = document.querySelectorAll(".class"); 
     var i; 
     for (i = 0; i < x.length; i++) { 
      x[i].style.visibility = "hidden"; 
     }   } 
     });

popup.html：

<html> 
<head> 
<script type="text/javascript" src="content.js"></script> 
</head> 
<body> 
<p>Turn off <span>class, "class"</span></p> 
<button type="button">Turn off</button> 
</body> 
</html>

出典

2017-01-05 Nat

一般に、ユーザーが「browserAction」ボタンをクリックしてユーザーのやりとりを開始する場合は、コンテンツスクリプトに[chrome.tabs.executeScript（） ']（https://developer.chrome）を挿入する必要があります。 com/extensions/tabs＃method-executeScript）** ** a * manifest.json * 'content_script'エントリの代わりに。どちらの方法でも*同じ*スクリプトを注入したい場所は非常にまれです。 – Makyen

あなたが選択したタブ上にある場合、これが実行されます。あなたはそのタブを選択する方法を変更する必要があります。基本的に、これはタブに要求を送信し、タブはこれらの要求を待ち受けます。あなたが適切な挨拶を得るなら、あなたはあなたの機能を果たすことができます。

popup.html

<html> 
    <head> 
    <script type="text/javascript" src="content.js"></script> 
    </head> 
    <body> 
    <p>Turn off <span>class, "class"</span></p> 
    <button type="button" id="button">Turn off</button> 
    </body> 
</html>

background.js

$('#button').on('click',function() 
{ 
    chrome.tabs.getSelected(null, function(tab) { 
    chrome.tabs.executeScript(tab.id, {file: "content_script.js"}); 
    }); 
});

content.js

if(document.getElementsByClassName(".class")) { 
    var x = document.querySelectorAll(".class"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
     x[i].style.visibility = "hidden"; 
    }    
}

@Makyenを示唆していたとしても、それはので、あなたのマニフェストからコンテンツスクリプトを削除します必ずしもすべてのタブに注入されているわけではありません。私はこの提案にも私の答えを編集しました。

出典

2017-01-05 20:48:23 Loaf

ユーザーが「browserAction」ボタンをクリックしてユーザーのやりとりが始まる*場合、コンテンツスクリプトは[chrome.tabs.executeScript（） ']（https://developer.chrome.com/extensions/tabs）＃method-executeScript）を* manifest.json *の 'content_script'エントリの代わりに使用します。 *すべてのURLに*を書き込むことは、あなたのユーザーリソースを犠牲にするレイジープログラミングです。 *何百ものタブを持つ私たちはどうですか？拡張子が使用されていないタブの余分なコンテンツスクリプトは必要ありません。（ええと、OPはそれを両方の方法でやっていましたが、あなたは* manifest.json * 'content_scripts'エントリを保持することを選択しました）。 – Makyen

@Makyenあなたは正しいです。私は私の答えを編集しました。私はまだクロムの延長線上で少し錆びている。 – Loaf

ありがとうございました。 * background.js *にあるコードは、* popup.html *（*ポップアップなど）に読み込まれたスクリプト内にある必要があります。js *は、* content.js *が現在の方法で '

ページのロードではなく、ボタンのクリックでcontent.jsを実行

答えて

関連する問題