React chrome extention　（Chrome拡張機能）のエラー

修正前 App.jsx

import React, { useEffect } from "react";

const App = () => {
  useEffect(() => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, { action: "modifyDOM" });
    });
  }, []);

  return <h1 className="title">Hello, World!</h1>;
};

export default App;

terminal

Failed to compile.

[eslint] 
src/App.js
  Line 5:5:  'chrome' is not defined  no-undef
  Line 6:7:  'chrome' is not defined  no-undef

Search for the keywords to learn more about each error.
ERROR in [eslint] 
src/App.js
  Line 5:5:  'chrome' is not defined  no-undef
  Line 6:7:  'chrome' is not defined  no-undef

Search for the keywords to learn more about each error.

webpack compiled with 1 error

chromeこの問題を回避するには、オブジェクトがで使用されている特定の行に対して ESLint を無効にしますApp.js。/* eslint-disable */次のように、エラーの原因となっている行の前にコメントを追加します。

App.jsx

import React, { useEffect } from "react";

const App = () => {
  useEffect(() => {
    /* eslint-disable */
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, { action: "modifyDOM" });
    });
    /* eslint-enable */
  }, []);

  return <h1 className="title">Hello, World!</h1>;
};

export default App;

このコメントは、ESLint に特定の行を無視し、オブジェクトに対して「未定義」エラーを発生させないように指示しますchrome。

この変更により、コードは ESLint エラーなしでコンパイルされるはずです。chromeただし、これらの行に対して ESLint を無効にすると、オブジェクトの未定義の参照がチェックされなくなることに注意してください。このコードを適切に実行するために必要な Chrome 拡張機能コンテキストがあることを確認してください。

参考
ChatGPT-4
https://chat.openai.com/share/72510a1a-0fa8-419e-9095-45623dadc3b0

Chrome extention
https://developer.chrome.com/docs/extensions/mv3/content_scripts/#matchAndGlob