chrome の拡張機能について

Question

chrome の拡張機能についての質問です。

指定したページで、ある機能を使いたく
ページの読み込み完了と同時に、下記の様にしてページ内にボタンを追加し、
そのボタンを押すとある動作をさせています。
（下記の内容ではアラートが表示されるようにしてあります）

var element = document.createElement('div');
element.innerHTML = '<input type="button"  value="コピー">';
element.setAttribute('onclick', 'hoge()');
document.body.appendChild(element);

var element = document.createElement('script');
element.textContent = 'function hoge(){alert(123);}';
document.body.appendChild(element);

この内容で、chrome のバージョン 70.* までは問題無く動作していたのですが、
71.* に更新したところ、動作しなくなってしまいました。

コンソールのエラーの内容は下記の通りです。

c703587405:1 Uncaught ReferenceError: hoge is not defined at HTMLDivElement.onclick (c703587405:1)

何故こうなったのかと、改善方法を教えて頂けますでしょうか。

宜しくお願い致します。

Answer 1

原因はよくわかりませんが content-script であっても別のコンテキスト(その拡張機能)で実行されているようです。
71では不正防止関連の修正が入っているのでその影響かもしれません。

単に content-script に関数を用意するか、

function hoge() {
  alert(456);
}

要素追加時に addEventListener としてもいいかもしれません。

element.querySelector('input').addEventListener('click', event => {
  alert(123);
}, false);

Comments

[worldtravel]

ありがとうございます。

後者の方で、無事、動くようになりました。
> 要素追加時に addEventListener としてもいいかもしれません。

本当に、ありがとうございました。
感謝致します。

[x_x]

関連 https://bugs.chromium.org/p/chromium/issues/detail?id=912069