chromeExtension のポップアップを React で作る

chromeExtensionByUsingReact.md

chromeExtension のポップアップを React で作る

これ見ながらやってみる

How to build a Chrome Extension with React JS – Code == Life

問題

popup/index.html のように階層を掘ると 正しく表示されない

解法

パスをゴニョる

$ create-react-app popup
$ cd popup
$ yarn eject

chromeExtension
├── README.md
├── dist
├── manifest.json
├── node_modules
├── package-lock.json
├── package.json
├── src
├── webpack.config.js
├── yarn.lock
├── README.md
└── popup
      ├── build
      ├── config
      ├── node_modules
      ├── package.json
      ├── public
      ├── scripts
      ├── src
      └── yarn.lock

// chromeExtension/config/paths.js
function getServedPath(appPackageJson) { 
  const publicUrl = getPublicUrl(appPackageJson); 
  const servedUrl = 
-    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); 
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './'); 
  return ensureSlash(servedUrl, true); 
} 

// chromeExtension/config/env.js
    // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />. 
    // This should only be used as an escape hatch. Normally you would put 
    // images into the `src` and `import` them in code to get their paths. 
-    PUBLIC_URL: publicUrl, 
+    PUBLIC_URL: '.' + publicUrl, 
  } 
); 

結果

めでたし