使用React.js开发自己的Chrome插件

最新推荐文章于 2024-08-15 12:31:46 发布
最新推荐文章于 2024-08-15 12:31:46 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： 行走的问题解决机 windows nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangpeterx/article/details/86704862
版权
本文介绍了如何使用React.js开发Chrome插件，包括配置环境、创建最简项目及修改内容。首先安装Node.js和相关工具，然后通过create-react-app初始化项目。接着，修改manifest.json文件并加载到Chrome扩展。最后，创建background.js脚本并更新manifest.json与package.json，完成插件的开发和测试。
摘要由CSDN通过智能技术生成

文章目录

1.配置环境

先安装nodejs,下载地址：下载 | Node.js
在这里插入图片描述
然后打开node命令行：
在这里插入图片描述
更改更新源：

npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功

npm config get registry

安装yarn和create-react-app:


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  zhangpeterx
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
​Chrome插件：React Developer Tools为React开发调试而生

				
			

			

				

					郭宝的博客
				

				

					06-27
					
					542
					
				

			

		

		

			
				
它是允许在Chrome和Firefox开发者工具中检查React组件层次结构的扩展插件。

			
		

	



                

              
                



	

		

			

				
					
React开发工具插件Chrome

				
			

			

				

					09-25
				

			

		

		

			
				
Free Download React Developer Tools CRX 3.4.0 for Chrome

			
		

	



                


  
              

                


	

		

			

				
					
使用create-react-app开发Chrome插件

				
			

			

				

					梦殇的博客
				

				

					10-29
					
					868
					
				

			

		

		

			
				
chrome插件
下面是我学习谷歌插件开发时看的一些文档博客

使用React.js开发Chrome插件
Chrome插件(扩展)开发全攻略
manifest.json字段解释
中文文档
英文官方文档
图灵Chrome扩展及应用开发

谷歌插件都一个清单manifest.json文件，该文件具体编写请看我写的另一篇文章
create-react-app初始化
npx create-react-ap...

			
		

	





	

		

			

				
					
如何使用 React 为自己 创建一个 Google Chrome 插件

					
最新发布

				
			

			

				

					gaotlantis的博客
				

				

					08-15
					
					413
					
				

			

		

		

			
				
初衷是这样的 我工作的时候发现各种链接太多了 有时候需要访问某个链接 一时半会找不到 所以想着 如果有个插件 可以把我工作用到的链接 都放在一起 那该多好啊。

			
		

	



		

			
		



	

		

			

				
					
使用React/Vue开发Chrome 插件

				
			

			

				

					frontend_frank的博客
				

				

					12-19
					
					739
					
				

			

		

		

			
				
本文代码：https://github.com/nyqykk/hello-extensions-react阅读本文你将了解到Chrome 插件整体架构；如何开发一个 Chrome 插件（Popup 和 Devtools）；如何使用前端框架（React/Vue）进行开发；如何调试插件；如何使用 Puppeteer 对插件进行 E2E 测试（本地和 CI 环境）。整体架构介绍明确概念Chrome 插件...

			
		

	





	

		

			

				
					
使用react开发chrome插件

				
			

			

				

					weixin_41897680的博客
				

				

					11-17
					
					4149
					
				

			

		

		

			
				
使用react开发谷歌插件

			
		

	





	

		

			

				
					
Chrome的React插件

				
			

			

				

					10-18
				

			

		

		

			
				
Chrome的React插件是开发人员在使用React.js框架进行前端开发时的重要辅助工具。React作为一款流行的JavaScript库，用于构建用户界面，特别是单页应用程序（SPA）。Chrome浏览器提供了丰富的开发者工具，而React插件...

			
		

	





	

		

			

				
					
React开发chrome插件系列教程之插件开发环境搭建

				
			

			

				

					--Joern的物联领域--
				

				

					11-07
					
					1555
					
				

			

		

		

			
				
文章目录预期目标开发环境搭建实践create-react-app搭建标准react工程工程开发目录配置修改webpack生成上述build目录设置多入口固定build生成的文件名设置popup不引入另外两个模块的js引入Antd回顾总结
紧接上一篇文章对chrome插件的基本介绍，这里我们就来开始真正实践一下插件的开发吧，第一部分就从开发环境搭建入手吧，这一部分也是插件开发和Web-SPA应用开发区别较大的一部分
预期目标
预期目标是搭建React+TS+Antd的插件开发环境，支持build生成插件所需要

			
		

	





	

		

			

				
					
react-3.2.1.crx  chrome 插件

				
			

			

				

					04-16
				

			

		

		

			
				
React是JavaScript库，主要用于构建用户界面，特别是单页面应用程序（SPA）。它以其高效的虚拟DOM（Virtual DOM）和组件化架构而...了解并掌握React的基础知识以及如何使用Chrome插件，将有助于你更好地利用这个工具。

			
		

	





	

		

			

				
					
react 谷歌开发插件

				
			

			

				

					10-20
				

			

		

		

			
				
React谷歌开发插件是前端开发者在使用React.js框架进行网页应用开发时不可或缺的工具。它是由Facebook官方推出的，旨在提供一套强大的调试和分析功能，帮助开发者更好地理解和优化React组件的性能。下面将详细介绍这...

			
		

	





	

		

			

				
					
使用TypeScript和React快速构建Chrome扩展的样板项目

				
			

			

				

					08-11
				

			

		

		

			
				
使用TypeScript和React快速构建Chrome扩展的样板项目

			
		

	





	

		

			

				
					
react redux chrome调试插件下载V3.4.2

				
			

			

				

					11-10
				

			

		

		

			
				
react redux chrome调试插件，用于开发人员调试跟踪redux 状态.

使用方法：扩展程序-》开发者模式-》加载已解压的扩展程序

			
		

	





	

		

			

				
					
React 谷歌浏览器插件

				
			

			

				

					07-22
				

			

		

		

			
				
React 谷歌浏览器插件

			
		

	





	

		

			

				
					
React Developer Tools 开发工具 | 谷歌（Chrome）浏览器插件

				
			

			

				

					03-03
				

			

		

		

			
				
【插件简介】 
 React Developer Tools是开发的React必备的开发者工具扩展。可以在chrome开发者工具中得到一个名为React的新标签，检查React组件层次结构，在页面上显示React组件。 
 【插件网站】 
 https://github.com/facebook/react-devtools 
 【插件更新】 
 2020-12-29 14:50:05 
 【插件版本】 
 4.10.112_4_2020 
 【插件标签】 
 高效开发 Chrome插件 
 【插件安装教程】 
 请下载文件后先解压，然后进入页面： chrome://extensions/  将文件拖拽到该页面，完成安装。
具体步骤: https://t.csdnimg.cn/NxMv  
 【热门插件】
·CSDN 浏览器助手： https://plugin.csdn.net/

			
		

	





	

		

			

				
					
快速利用 vue 或者 react 开发 chrome 插件

				
			

			

				

					weixin_34388207的博客
				

				

					12-04
					
					405
					
				

			

		

		

			
				
原文链接：github.com/lzwaiwai/bl…
最近写了一个可以利用 vue 或者 react 快速开发 chrome 插件的 boilerplate，只需要使用我之前写的 bigroom-cli 工具，就可快速简单地进行启动、打包、编译等，同时也支持保存代码后，插件自动更新，页面自动刷新。
boilerplate 生成：
首先我们安装 bigroom-cli：
npm install ...

			
		

	





	

		

			

				
					
React开发chrome插件系列教程之chrome插件基本介绍

				
			

			

				

					--Joern的物联领域--
				

				

					10-24
					
					4870
					
				

			

		

		

			
				
文章目录chrome插件能干什么chrome插件的版本chrome插件的浏览器支持chrome插件的功能组成manifest.jsonpopupcontent scriptbackground scriptchrome插件的展现形式browserAction(浏览器右上角)pageAction(浏览器右上角)右键菜单override(覆盖特定页面)devtools(开发者工具)回顾总结
这里包括下文讨论到的chrome插件其实是官方所指的chrome extension，考虑到目前主流的叫法皆以chrome

			
		

	





	

		

			

				
					
【实战】1573- 用 React 开发了一款 Chrome 插件【七牛云图床】

				
			

			

				

					pingan8787
				

				

					12-24
					
					803
					
				

			

		

		

			
				
前言习惯使用 markdown 写作的朋友，肯定会有自己的图床，七牛云的对象存储对于个人用户每月免费 10GB，可谓是白嫖的上上之选，只需要注册后，绑定一个域名就可以使用了。我之前使用的是一款开源的软件 PicGo，它使用的时候 Electron+vue 开发，支持七牛图床、腾讯云 COS、阿里云 OSS、GitHub 等，可谓是非常方便。我们知道使用了 Electron 相当于打包了一个 chr...

			
		

	





	

		

			

				
					
使用 React.js 开发 Chrome 插件

				
			

			

				

					前端大全
				

				

					07-09
					
					2635
					
				

			

		

		

			
				

  
    
                    

                    

                    
                    
                    （点击上方公众号，可快速关注）来源：UncleChen unclechen.github.io/2017/06/16/使用ReactJS开发Chrome插件/一、背景相信...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值