SPAに対応したい - Githubissues

shokkunrf commented 1 month ago

PrimeVideoはトップページの動画一覧から動画詳細ページへ遷移するときにSPAっぽい動きをしてるため、現状のままだとcontent_scriptを読み込むために動画詳細ページでリロードする必要がある

shokkunrf commented 1 month ago

matchesの指定を緩めれば対応しなくてもいいかも？そうすると動画コンテンツを持ってるAmazonの商品でも動作しちゃう

  content_scripts: [
    {
      matches: ["https://www.amazon.co.jp/gp/video/detail/*"],
      js: ["src/content/main.ts"],
    },
  ],

shokkunrf commented 1 month ago

緩めても意味ないや動画詳細ページに遷移してからvideoタグを取得しなければならないからどのみちリロードが必要になる

shokkunrf commented 1 month ago

SPA用にservice workerでこのコードを実行する必要があるが、ビルド後にはmain.tsではなくなっているため読み込めない

    chrome.tabs.executeScript(tabId, { file: "../content/main.ts" }, (res) => {

shokkunrf commented 1 month ago

vite.config.tsのrollupOptionsを変更することで読み込めそう。

shokkunrf commented 1 month ago

rollupOptionsを追加してみたらnpm run buildは通るがnpm run devが通らない。 contentを追加するとcrxjsでtsのまま読み込まれパースエラーを起こす。 tsc && viteも試してみたがダメっぽい。

export default defineConfig({
  plugins: [crx({ manifest })],
  build: {
    outDir: "dist",
    emptyOutDir: true,
    rollupOptions: {
      input: {
        content: "src/content/main.ts",
      },
      output: {
        entryFileNames: "assets/[name].js",
      },
    },
  },
});

Viteはvite buildではrollupをviteではesbuildを使っているらしい。

vite buildで生成したもので試したみたらエラーが発生した

Error in event handler: TypeError: chrome.tabs.executeScript is not a function

manifest.json v3ではexecuteScript()はtabsじゃなくてscriptingのメソッドだった。

executeScript()の実行に権限が必要だった。

  host_permissions: ["https://www.amazon.co.jp/"],

executeScript()はファイルを指定する以外に関数を渡すことができる。じゃぁrollupOptionsを変更してcontent.jsを作る必要はない。ってことはnpm run devでまた動かせるようになりそう

shokkunrf commented 1 month ago

executeScript()の引数のfuncは直接関数を指定する必要がある。無名関数から呼び出す関数の呼び出しはできない。渡した関数は外のスコープを参照できない。

PrimeVideoは再生する動画を切り替える(別の作品を見る、同作品の別の話を見る)動作をしたときにvideoタグを使いまわしていた。 videoタグに複数回video.addEventListener()したり、chrome.runtime.onMessage.addListener()しないようにcontent_scriptの呼び出しを1つのタブにつき1回とするようにした。

shokkunrf / cross-party

SPAに対応したい #1