合肥企业建网站,做阿里巴巴网站多少钱,芜湖网站建设公司,厦门建筑人才网文章目录概述实例教学#xff1a;做一个“一键复制标题链接”的插件1 先想清楚要什么2 目录结构3 编写清单文件 manifest.json4 设计弹出界面 popup.html5 实现逻辑 popup.js6 加个图标#xff08;可选#xff09;7 本地加载测试完整代码清单manifest.jsonpopup.htmlpopup.j…文章目录概述实例教学做一个“一键复制标题链接”的插件1 先想清楚要什么2 目录结构3 编写清单文件 manifest.json4 设计弹出界面 popup.html5 实现逻辑 popup.js6 加个图标可选7 本地加载测试完整代码清单manifest.jsonpopup.htmlpopup.js效果预览如何打包分享关于那5美元注册费写在最后省心完整项目包概述上篇文章介绍了 文档地址及开发相关信息从零开发你的第一款Chrome插件技能、步骤与避坑指南我们手摸手一起来实战试试实例教学做一个“一键复制标题链接”的插件光说不练假把式咱们直接做一个能用的插件。它的功能很简单点击工具栏图标弹出一个窗口显示当前标签页的标题和网址并提供一个“复制”按钮一键将“标题 网址”复制到剪贴板。1 先想清楚要什么需要获取当前活动标签页的信息 → 要用到chrome.tabs.query需要将文字写入剪贴板 → 可以用navigator.clipboard.writeText需要一个弹出界面 → 写一个popup.html配上简单的CSS需要在popup中显示数据 → popup.js里获取数据并更新DOM2 目录结构在电脑上新建一个文件夹名字随便比如copy-title-url。里面放这些文件copy-title-url/ ├── manifest.json ├── popup.html ├── popup.js └── icon.png 可选图标文件没错就这么简单因为不需要后台脚本和内容脚本所以省去了background和content文件。3 编写清单文件 manifest.json{manifest_version:3,name:复制标题和网址,version:1.0,description:一键复制当前页面的标题和网址,action:{default_popup:popup.html,default_icon:icon.png},permissions:[activeTab],icons:{16:icon.png,48:icon.png,128:icon.png}}manifest_version必须是3这是Chrome当前强制要求的版本。action.default_popup指定点击图标时弹出的页面。permissions我们只需要activeTab权限它允许我们在用户点击插件时临时访问当前标签页不需要申请所有网站的权限更安全。icons给插件配个图标没有的话可以用占位图。4 设计弹出界面 popup.html!DOCTYPEhtmlhtmlheadmetacharsetUTF-8stylebody{width:300px;padding:15px;font-family:system-ui,sans-serif;}h3{margin:0 0 10px 0;color:#333;}.info{background:#f5f5f5;padding:10px;border-radius:6px;margin-bottom:15px;word-break:break-word;}.info p{margin:5px 0;}.info .title{font-weight:bold;}.info .url{color:#0366d6;font-size:0.9em;}button{width:100%;padding:10px;background:#2ea44f;color:white;border:none;border-radius:6px;font-size:14px;cursor:pointer;}button:hover{background:#22863a;}.status{margin-top:10px;text-align:center;color:#2ea44f;font-size:0.9em;opacity:0;transition:opacity 0.3s;}.status.show{opacity:1;}/style/headbodyh3 当前页面信息/h3divclassinfopclasstitleidtitle加载中.../ppclassurlidurl加载中.../p/divbuttonidcopyBtn复制标题和网址/buttondivclassstatusidstatus已复制到剪贴板/divscriptsrcpopup.js/script/body/html界面分三块显示标题、显示网址、复制按钮还有一个用来闪现“复制成功”提示的状态条。5 实现逻辑 popup.js// popup.js// 当popup页面加载完成时获取当前标签页信息document.addEventListener(DOMContentLoaded,function(){// 查询当前活动标签当前窗口chrome.tabs.query({active:true,currentWindow:true},function(tabs){// 注意tabs 是一个数组因为可能有多个标签满足条件但activecurrentWindow只会有一个constcurrentTabtabs[0];if(currentTab){document.getElementById(title).textContentcurrentTab.title||无标题;document.getElementById(url).textContentcurrentTab.url||无网址;}else{document.getElementById(title).textContent无法获取标签页;}});// 绑定复制按钮点击事件document.getElementById(copyBtn).addEventListener(click,function(){consttitledocument.getElementById(title).textContent;consturldocument.getElementById(url).textContent;// 组装要复制的文本比如百度一下你就知道 https://www.baidu.comconsttextToCopy${title}${url};// 使用 Clipboard API 复制navigator.clipboard.writeText(textToCopy).then((){// 显示成功提示conststatusEldocument.getElementById(status);statusEl.classList.add(show);setTimeout((){statusEl.classList.remove(show);},1500);}).catch(err{alert(复制失败err);});});});这里用了chrome.tabs.query获取当前标签页返回的tabs[0]包含title和url属性。复制用的是现代浏览器的navigator.clipboard.writeText兼容性很好。如果失败降级方案可以弹出alert。6 加个图标可选随便找个16x16以上的PNG图片命名为icon.png放在项目文件夹里。如果没有可以在网上找占位图或者直接用文字图标。7 本地加载测试打开 Chrome地址栏输入chrome://extensions/。打开右上角“开发者模式”。点击“加载已解压的扩展程序”选择copy-title-url整个文件夹。插件就会出现在工具栏点击图标应该能看到当前页面的标题和网址点“复制”试试。调试小技巧如果点图标没反应右键点击图标选择“检查弹出页面”会打开 DevTools可以看控制台报错。完整代码清单为了方便你复制我把所有文件内容再列一次。manifest.json{manifest_version:3,name:复制标题和网址,version:1.0,description:一键复制当前页面的标题和网址,action:{default_popup:popup.html,default_icon:icon.png},permissions:[activeTab],icons:{16:icon.png,48:icon.png,128:icon.png}}popup.html!DOCTYPEhtmlhtmlheadmetacharsetUTF-8stylebody{width:300px;padding:15px;font-family:system-ui,sans-serif;}h3{margin:0 0 10px 0;color:#333;}.info{background:#f5f5f5;padding:10px;border-radius:6px;margin-bottom:15px;word-break:break-word;}.info p{margin:5px 0;}.info .title{font-weight:bold;}.info .url{color:#0366d6;font-size:0.9em;}button{width:100%;padding:10px;background:#2ea44f;color:white;border:none;border-radius:6px;font-size:14px;cursor:pointer;}button:hover{background:#22863a;}.status{margin-top:10px;text-align:center;color:#2ea44f;font-size:0.9em;opacity:0;transition:opacity 0.3s;}.status.show{opacity:1;}/style/headbodyh3 当前页面信息/h3divclassinfopclasstitleidtitle加载中.../ppclassurlidurl加载中.../p/divbuttonidcopyBtn复制标题和网址/buttondivclassstatusidstatus已复制到剪贴板/divscriptsrcpopup.js/script/body/htmlpopup.jsdocument.addEventListener(DOMContentLoaded,function(){chrome.tabs.query({active:true,currentWindow:true},function(tabs){constcurrentTabtabs[0];if(currentTab){document.getElementById(title).textContentcurrentTab.title||无标题;document.getElementById(url).textContentcurrentTab.url||无网址;}else{document.getElementById(title).textContent无法获取标签页;}});document.getElementById(copyBtn).addEventListener(click,function(){consttitledocument.getElementById(title).textContent;consturldocument.getElementById(url).textContent;consttextToCopy${title}${url};navigator.clipboard.writeText(textToCopy).then((){conststatusEldocument.getElementById(status);statusEl.classList.add(show);setTimeout((){statusEl.classList.remove(show);},1500);}).catch(err{alert(复制失败err);});});});效果预览如何打包分享如果你想把插件发给朋友用不上架商店有两种方式直接发文件夹把copy-title-url文件夹压缩成zip发给朋友他解压后在chrome://extensions/里开启开发者模式点击“加载已解压的扩展程序”选择文件夹即可。打包成.crx在扩展管理页面点击“打包扩展程序”选择项目文件夹会生成一个.crx文件和一个.pem密钥文件。.crx可以直接拖拽到扩展管理页面安装也要先开启开发者模式。.pem一定要保存好以后更新版本要用同一个密钥。如果想上架 Chrome 网上应用店需要花5美元注册开发者账号然后上传包含所有文件的zip包注意不要包含.pem和.crx填写描述和截图即可。关于那5美元注册费如果你没有国际信用卡可以申请一张虚拟国际信用卡比如 WildCard用支付宝充值后就能在线支付。这类服务网上很多选择靠谱的就行。不过如果你只是自用或分享给少数朋友完全没必要花钱上架。写在最后这个例子虽然简单但涵盖了Chrome插件开发的核心知识点manifest配置、权限申请、popup页面、chrome.tabs API的使用。如果你想实现更复杂的功能比如修改网页内容、监听网络请求只需要在此基础上添加对应的API调用即可。动手试试吧哪怕只是把代码复制过去跑起来你也能感受到“自己写的插件在浏览器里跑起来了”的那种成就感。下一篇文章我打算写一个“自动填写表单”的插件实战感兴趣的话可以关注。如果你在开发过程中遇到问题欢迎留言交流。希望这篇教程对你有帮助。省心完整项目包Chrome插件一键复制当前页面标题链接完整源码可直接安装如果这篇这篇文章对您有帮助关注、点赞、收藏三连支持一下。有疑问或想法评论区见。我们下期再见。