Reactで外部関数 chrome.runtime.sendMessage() でエラー。ビルドできない。

Question

Reactを使ってChrome拡張機能の作成をしております。

create-react-app で雛形を作成し、徐々に既存のファイルを追加しながら開発したいと考えていたのですが、
表題のとおり chrome.runtime.sendMessage() を呼び出すところで未定義エラーが出てしまい、ビルドできません。 Reactのsrcディレクトリにchromeが存在しないのでエラーが出る理由はわかるのですが、解決方法がわかりません。chromeなどの外部の関数を呼出してもビルドできる方法はないでしょうか？

不足の情報などありましたら、適宜追記していきますので何卒よろしくお願いたします。


App.js

function App() {
  return (
    <div className="App">
      <div>
        <button onClick={() => { login() }}><h1>Login</h1></button>
      </div>
    </div>
  );
}

function login() {
  chrome.runtime.sendMessage(
    { type: MESSAGE_TYPE.LOGIN1 },
    function (response) {
      console.log(response);
    });
}

エラーメッセージ

$ yarn build
yarn run v1.15.2
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/App.js
  Line 25:  'chrome' is not defined  no-undef

Search for the keywords to learn more about each error.


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 1

chromeというグローバル変数は普通のブラウザやNode.js環境にはないので、エラーとなってしまいます。とりあえずはそのファイルでchromeを使う前に/* global chrome */のようなコメントを入れて、「chromeというグローバル変数がある」と伝えることでコンパイルを通すことが可能です。

（create-react-appでESLintの設定を変える方法もあるだろうけど、そちらはいったん保留ということで）

Comments

[TosuTosu]

素早い回答をありがとうございます。
ご回答の通り、以下のソースコードのようにして問題を解決することができました。ありがとうございます！

function login() {
/* global chrome */
chrome.runtime.sendMessage( ... );
}