谷歌浏览器 引入插件内css

本文介绍了一种在浏览器扩展程序中加载CSS文件的方法,并提供了具体的JavaScript实现代码。通过此方法,可以将CSS样式应用到扩展程序的页面上,同时文章还提到了如何在manifest.json中配置资源访问权限。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//引入插件内css
//cssurl = ./meun/meun.css
function includeCss(cssurl) {
    //csspath = ./menu/
    var localCssUrl = chrome.extension.getURL(cssurl);


    $.get(localCssUrl, function (data) {


        var csspath = localCssUrl.substr(0, localCssUrl.lastIndexOf("/"));


        var data = data.replace(/\${csspath}/igm, csspath);
        
        var styleInsert = document.createElement("style");
        var styleContent = document.createTextNode(data);
        styleInsert.type = "text/css";
        if (styleInsert.styleSheet) styleInsert.styleSheet.cssText = styleContent.nodeValue;
        else {
            styleInsert.appendChild(styleContent);
            document.getElementsByTagName("head")[0].appendChild(styleInsert)
        }


    });


}
// 使用方法
includeCss("js/Contextmenu/Contextmenu.css");


使用方法css

.textpng {
    background: url(${csspath}/images/icons/text.png) center no-repeat; 
    background-size:16px auto; 
}

最后还得在manifest.json中加入配置

 

   //js代码可以访问的资源
   "web_accessible_resources": [ 
	  "js/Contextmenu/*"
    ],


  

### 使用 Vue 开发 Google Chrome 浏览器扩展 #### 1. 基础概念 Google Chrome 扩展是一种用于增强浏览器功能的小型应用程序。开发者可以利用 HTML、CSS 和 JavaScript 技术构建这些扩展[^1]。Vue 是一种轻量级前端框架,具有视图与数据分离的特点,并支持双向绑定和组件化开发方式,非常适合用来开发单页面应用(SPA),这也正好契合了 Chrome 扩展通常只需要一个 HTML 文件或 JS 文件的要求[^2]。 #### 2. 构建环境 为了使用 Vue 来开发 Chrome 扩展,首先需要设置好项目的基础架构。这包括安装必要的依赖项以及配置 Webpack 或 Vite 等工具链以便更好地管理资源文件。以下是具体实现方法: - **初始化项目**: 创建一个新的目录并运行 `npm init` 初始化 Node.js 项目。 - **引入 Vue**: 安装 Vue 及其相关库到您的项目中通过命令如 `npm install vue@next`. - **配置打包工具**: 推荐采用现代模块打包方案比如 Vite, 这样能够简化构建流程并且提升效率. ```javascript // vite.config.js 配置示例 import { defineConfig } from 'vite' export default defineConfig({ build: { rollupOptions: { output: { entryFileNames: 'assets/[name].js', chunkFileNames: 'assets/[name].js', assetFileNames: 'assets/[name].[ext]' } }, emptyOutDir: true, } }) ``` #### 3. 编写核心逻辑 根据需求不同,Chrome 扩展会涉及多个部分的编写工作,主要包括后台脚本(background scripts), 弹出窗口(popups) , 内容注入(content scripts)等几个方面: - **Background Script**: 处理长期运行的任务和服务请求. - **Popup Page**: 提供给用户的交互界面,一般由 Vue 组件构成。 - **Content Scripts**: 注入目标网页内部执行特定操作的部分,同样可以用 Vue 实现复杂 UI[^3]. 下面是一个简单的例子展示了如何在 popup 中集成 Vue 应用程序: ```html <!-- src/popup/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Popup</title> <!-- Import CSS and other resources here --> </head> <body> <div id="app"></div> <script type="module" src="./main.js"></script> </body> </html> ``` ```javascript // src/popup/main.js import { createApp } from 'vue'; import App from './components/App.vue'; const app = createApp(App); app.mount('#app'); ``` #### 4. 发布前准备 完成编码之后还需要注意几点事项才能顺利发布至商店供大众下载使用: - 确认 manifest.json 的版本号正确无误; - 对敏感权限申请保持谨慎态度; - 将所有静态资产压缩优化减少体积大小; 最后记得按照官方指引提交审核材料等待批准即可上线分享成果啦! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值