背景
上篇文章《前端我的项目本地调试计划》中讲到开发chrome拓展插件帮忙实现Cookie复制，从而实现本地我的项目调试。但插件采纳的是原生JS开发的，本文来探讨如何在我的项目中引入React？
我的项目实际
首先，执行上面命令初始化我的项目
create-react-app chrome-extension --template typescript创立的我的项目构造如下：
将红色圈出的文件删除，调整的构造如下：
批改pubic文件夹中manifest.json配置文件，增加须要应用的图标、权限，整体配置如下：
{ "manifest_version": 2, // 为2时默认开启内容安全策略 "name": "debug", "description": "前端我的项目调试工具", "version": "1.0.0", "icons": { "16": "/images/icon16.png", "32": "/images/icon32.png", "48": "/images/icon48.png", "128": "/images/icon128.png" }, "permissions": [ "cookies", "tabs", "http://*/*", "https://*/*", "storage" ], "browser_action": { "default_icon": { "16": "/images/icon16.png", "32": "/images/icon32.png", "48": "/images/icon48.png", "128": "/images/icon128.png" }, "default_popup": "index.html" // 弹窗页面 }, "content_security_policy": "script-src 'self'; object-src 'self'" // 内容安全策略（CSP）}删除index.html中文件的援用，调整后如下：
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body></html>在public中增加images目录寄存图标：
在App.tsx实现Cookie复制性能，这里我引入了antd组件库
import React from 'react';import styles from './App.module.css';import { Button, Form, Input } from 'antd';declare const chrome: any;interface ICookie { name: string; value: string; path: string; secure: string domain: string; hostOnly: boolean; httpOnly: boolean; expirationDate: number; storeId: string; session: boolean;}interface ITab { id:number; index:number; windowId:number; selected:boolean; pinned:boolean; url:string; title:string; favIconUrl:string; status:string; incognito:boolean;}function App() { const layout = { labelCol: { span: 8 }, wrapperCol: { span: 16 }, }; /** 重定向 */ const redirectTo = (url: string) => { window.open(url); } /** 获取地址栏 */ const getUrl = (): Promise<ITab> => { return new Promise((resolve) => { chrome.tabs.getSelected(null, resolve) }) } /** 获取Cookie */ const getCookie = (url: string): Promise<ICookie[]> => { return new Promise(async (resolve) => { chrome.cookies.getAll({ url }, resolve) }) } /** 设置Cookie */ const setCookie = (cookies: ICookie[], redirect_url: string) => { return new Promise<void>(async (resolve) => { cookies.forEach((cookie) => { const { name, value, path, secure, expirationDate, storeId } = cookie; chrome.cookies.set({ url: redirect_url, name, value, path, secure, expirationDate, storeId, domain: 'localhost' }); }) resolve(); }) } /** 表单验证通过后的回调 */ const onFinish = async (values: any) => { const { url } = values; if (!url) alert('Please input your debug url!'); const tab = await getUrl(); const cookies = await getCookie(tab.url); setCookie(cookies, url).then(() => redirectTo(url)); } return ( <div className={styles.container}> <Form {...layout} name="basic" onFinish={onFinish} className={styles.form} > <Form.Item label="调试地址" name="url" rules={[{ pattern: /^https?:\/\/*\/*/, message: 'Please input your validable url!' }]} > <Input placeholder="Please input your debug url!" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit">调试</Button> </Form.Item> </Form> </div> );}export default App;执行构建时，public中的文件会间接复制到构建输入文件夹build中，而弹窗的脚本也会在编译压缩后注入到index.html
将build目录增加到谷歌浏览器的拓展中
应用插件后发现报了如下谬误
谬误的起因是内容安全策略不容许在index.html中应用内联脚本
webpack能够设置不容许注入内联脚本，能够在根目录下创立.env文件，其中增加INLINE_RUNTIME_CHUNK=false，该字段示意是否容许注入内联脚本；或者还能够装置cross-env，更改build命令，两种形式都能够用来设置环境变量。
"build": "cross-env INLINE_RUNTIME_CHUNK=false react-scripts build",而后从新build，测试插件性能胜利！