devtools support

lxieyang · lxieyang · commit ec28fa1e8132 · 2021-02-21T15:52:01.000-05:00
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@
 
 - **_Recently updated from React ~~16~~ to 17 and Webpack ~~4~~ to 5!_**
 - **_Recently added [TypeScript](https://www.typescriptlang.org/) Support!_**
+- **_Recently added [devtools](https://developer.chrome.com/docs/extensions/mv3/devtools/) Support! Thanks [GeekaholicLin](https://github.com/lxieyang/chrome-extension-boilerplate-react/issues/17)!_**
 
 ## Features
 
diff --git a/src/pages/Devtools/index.js b/src/pages/Devtools/index.js
@@ -1 +1,5 @@
-chrome.devtools.panels.create('Dev Tools', 'icon-34.png', 'panel.html');
+chrome.devtools.panels.create(
+  'Dev Tools from chrome-extension-boilerplate-react',
+  'icon-34.png',
+  'panel.html'
+);
diff --git a/src/pages/Panel/Panel.tsx b/src/pages/Panel/Panel.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-
 import './Panel.css';
 
-const Panel = (): JSX.Element => {
+const Panel: React.FC = () => {
   return (
     <div className="container">
       <h1>Dev Tools Panel</h1>
diff --git a/src/pages/Panel/index.html b/src/pages/Panel/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Panel</title>
+    <title>Dev Tools Panel</title>
   </head>
 
   <body>
