Chrome拡張で操作したいと思った要素が、ページ読込後のJSで生成される要素だったため、
うまく操作が出来なかったという方に向けて、解決方法の一つをご紹介します。
今回の記事はChrome拡張の技術というわけではないですが、
Chrome拡張を作る上でよく利用する方法なので知っておいて損はないかと思います。
今回はサンプルとしてQiita記事の広告を消しています。
後から追加される要素のいい例だったので広告消しをやりましたが、
広告はそのサイトの収入源でもあるかと思いますのであまりお勧めはしません。
ただ、個人でこっそりやる分には。。（筆者もよくやってます）
新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として残し共有できればと思い、記事を書いています。
以下は別のChrome拡張の記事です。合わせてどうぞ
「Slack」を便利に使うChrome拡張
「ChartWork」を便利に使うChrome拡張
「楽天市場」を便利に使うChrome拡張
用意するファイル
root/
├ manifest.json
└ js/
├ script.js
└ jquery-3.5.1.min.js
script.js
指定した要素が出現するまで待機しています。
今回はシンプルに書いてますが、要素が出現しない場合も考えて
タイムアウトとかを入れた方がいいです。(3分待ったら終了とか)
function wait(selector,call_back){
var progress = function(){
var e = $(selector);
if(e.length){
call_back(e);
return;
}
setTimeout(progress,300);
};
progress();
};
$(function(){
wait("[id^='google_ads_iframe']",function(obj){
//要素の出現が確認されたら親から消します
//この要素だけ消しても後からまた追加されるみたいなので。。
obj.parent().remove();
});
});
manifest.json
content_scriptsに、今回実験するページURLとjquery、script.jsを指定します。
{
"name": "要素の出現を待つテスト",
"version": "1.00",
"description": "要素の出現を待つテスト",
"permissions": [],
"content_scripts": [
{
"matches": ["https://qiita.com/doran/items/*"],
"js": ["js/jquery-3.5.1.min.js","js/script.js"]
}
],
"icons": {
"48": "images/icon.png"
},
"manifest_version": 3
}
実行結果
1.まず拡張がOFFの状態。広告が後から出てきます。。
2.拡張をONにしてページを更新すると。。。広告が消えた！
おしまい。。
その他のChrome拡張の実装方法
以下はこれまでに投稿したChrome拡張の記事です。用途に応じてご覧ください。
[Chrome拡張] ツールバーのアイコンをクリックしてHTMLページを表示する方法
[Chrome拡張] Chrome拡張メニューからページを操作する方法
[Chrome拡張] Webページ(content scripts)からChrome拡張画面へメッセージを送る方法
[Chrome拡張] Chrome拡張画面でタイマー(定期実行処理)を使用する方法
[Chrome拡張] Content Scriptsでタイマー(定期実行処理)を使用する方法
[Chrome拡張] Chrome拡張メニューからWebページを操作する方法
[Chrome拡張] Chrome拡張メニューからWebページを操作する方法(jQueryを使う)
[Chrome拡張] Chrome拡張メニューとWebページでやりとりする方法
[Chrome拡張] Chrome拡張メニューとWebページでやりとりする方法(Content Scriptsを使う)
[Chrome拡張] Chrome拡張メニューから開いていないWebページの情報を取得する方法
[Chrome拡張] ポップアップメニューを表示する方法
[Chrome拡張] ポップアップメニューからWebページを操作する方法
[Chrome拡張] ポップアップメニューからWebページを操作する方法(jQueryを使う)
[Chrome拡張] ポップアップメニューからWebページを操作する方法(スタイル変更)
[Chrome拡張] ストレージ(chrome.storage.local)を利用する方法
[Chrome拡張] オプションページを表示する方法