0
私は要素のIDを自動生成する必要があるいくつかの実験に取り組んでいます。私はchrome extensionを使うことに決めました。chrome.browserAction.onClickedがトリガーされない
コンテンツスクリプトは、サイトのホームページにアクセスすると発生します(例:https://secure.checkout.visa.com/)。他のページに移動すると(例えば、 "アカウントの作成"をタップする)、スクリプトは起動されませんでした。コンテンツスクリプトでブレークポイントを設定しようとしましたが、ホームページだけにヒットしましたが、ページ。
ここで何が問題になったのでしょうか?以下のコードは次のとおりです。
// manifest.json
{
"manifest_version": 2,
"name": "Chrome Auto Gen ID",
"description": "Generate IDs",
"version": "1.0",
"permissions": ["activeTab"],
"background": {
"scripts": ["event_page.js"],
"persistent": false
},
"browser_action": {
"default_title": "Auto generate ID"
},
"content_scripts": [
{
"matches": ["https://secure.checkout.visa.com/*"],
"js": ["jquery-3.2.1.min.js", "auto_gen_id.js"],
"all_frames": true,
"run_at": "document_idle"
}
]
}
コンテンツスクリプト:
// auto_gen_id.js
var divs = document.getElementsByTagName("div");
var inputs = document.getElementsByTagName("input");
var sections = document.getElementsByTagName("section");
var count = 0;
function genId(list) {
for (var i = 0; i < list.length; ++i) {
var element = list[i];
if (element.hasAttribute("id")) {
continue;
}
element.id = "gen-id-" + count++;
}
}
genId(divs);
genId(inputs);
背景スクリプト:
// event_page.js
chrome.browserAction.onClicked.addListener(function(tab) {
console.log('Generating IDs on ' + tab.url);
chrome.tabs.executeScript(null, {file: "auto_gen_id.js"});
});
変更しようとしているページが「シングルページのウェブサイト」のようです。つまり、新しいページを実際に読み込むのではなく、実際のページとAJAXを1つだけ使用して新しいコンテンツを読み込みます。私は確認するためにサイトに行くつもりはないが、あなたの問題はそのようなページの典型です。参照:[JavaScript/jQuery DOMの変更リスナーはありますか?](https://stackoverflow.com/a/39508954)、ページの変更の検出方法 – Makyen
上記のコメントに加えて、指定されたコンテンツスクリプトを自動的に実行するmanifest.jsonの宣言を介して、コンテンツスクリプトを2回インジェクトします。 – wOxxOm