基本的に、コンテンツが変更されたときにスクリプトを実行するようにしたいですDIV
。スクリプトは別々なので (Chrome 拡張機能のコンテンツ スクリプトと Web ページ スクリプト)、DOM 状態の変更を単純に監視する方法が必要です。ポーリングを設定することもできますが、それはずさんなようです。
ベストアンサー1
長い間、DOM3 ミューテーション イベントは利用可能な最善のソリューションでしたが、パフォーマンス上の理由から非推奨になりました。DOM4 ミューテーションオブザーバー廃止されたDOM3ミューテーションイベントの代替です。現在、最新のブラウザに実装されている(または古いバージョンの Chrome ではMutationObserver
ベンダー プレフィックス付き):WebKitMutationObserver
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// fired when a mutation occurs
console.log(mutations, observer);
// ...
});
// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
subtree: true,
attributes: true
//...
});
この例では、DOMの変更document
とそのサブツリー全体を監視しており、要素の属性の変更と構造の変更に対しても実行されます。ドラフト仕様には、有効なミューテーションリスナープロパティ:
子リスト
true
ターゲットの子に対する突然変異を監視する場合は に設定します。属性
true
ターゲットの属性の変更を監視する場合はに設定します。文字データ
true
ターゲットのデータの変更を監視する場合はに設定します。サブツリー
true
ターゲットだけでなく、ターゲットの子孫に対する突然変異も監視する場合はに設定します。属性古い値
- が true に設定され、変異前のターゲットの属性値を記録する必要がある
true
場合に設定します。attributes
文字データ古い値
- が true に設定され、変異前のターゲットのデータを記録する必要がある
true
場合に設定します。characterData
属性フィルター
- すべての属性の変更を監視する必要がない場合は、属性のローカル名 (名前空間なし) のリストを設定します。
(このリストは 2014 年 4 月現在のものです。変更があるかどうかは仕様で確認できます。)