はじめにとあるページ向けに作っていた拡張機能が上手く動作しなくなったので確認すると、React.js を利用した SPA に変更されていた。 リロードするとちゃんと動作するのだが、クリックなどでページ遷移すると拡張機能が動作しないので、対応方法について調べた。 続編: Chrome 拡張機能で background scripts から content scripts にメッセージを送信する TL;DR chrome.tabs.onUpdated.addListener でページ遷移を検知 chrome.tabs.executeScript でJSを注入 DOM 追加するような場合は、追加位置によっては残存するので適宜削除する 目次はじめにTL;DR環境・条件詳細chrome.tabs.onUpdated.addListener についてchrome.tabs.executeScrip
![Chrome 拡張機能を React などで構成された SPA で動作させる方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/db310dd06e6e023df64bb6311df50ac0e95af882/height=288;version=1;width=512/https%3A%2F%2Fr17n.page%2F2019%2F10%2F27%2Fchrome-extension-with-spa%2F2019-10-27-10-31-43.png)