`

Chrome扩展 新建扩展 从HelloWorld开始

阅读更多
虽然觉得Hello World有点俗,但是还是决定从他开始

新建一个chrome的hello world插件非常容易

1 建一个文件夹
任意命名
在文件夹下放一个icon.png 的小图标
创建一个名为manifest.json文件
文件内容如下:
{
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "about hello world",
  "browser_action": {
    "default_icon": "icon.png"
  }
}


2 载入扩展
点击地址栏后面扳手图标,工具-> 扩展程序 进入扩展页面 ->  载入正在开发的扩展程序 填写文件夹的地址,就可以看到 图标 显示在了地址栏后面

3 弹出hello world
添加hello.html文件,放一句hello world进去
修改manifest.json

  "browser_action": {
    "default_icon": "icon.png",
    "popup": "hello.html"
  }

重新载入扩展文件夹即可显示效果

分享到:
评论

相关推荐

    Hello World-crx插件

    Hello World-crx插件是基于Chrome扩展框架构建的,因为CRX是Chrome浏览器扩展的文件格式。这个框架利用了HTML、CSS和JavaScript等Web技术,使得开发者能够创建具有特定功能的应用,这些应用能够在用户的浏览器窗口内...

    goole浏览器扩展应用程序插件开发

    在提供的文件列表中,只有一个名为“helloworld”的文件。通常情况下,这可能是一个示例项目,用于展示基本的浏览器扩展开发流程。在这样的项目中,开发者可能会找到一个简单的manifest.json文件和一个或多个...

    NodeJS+express如何新建一个自己需要的项目

    在IT行业中,Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许开发者在服务器端使用JavaScript进行开发。Express则是Node.js的一个轻量级Web应用框架,它简化了构建Web服务的过程,使得开发者能够快速...

    Flask入门系列教程(一).pdf

    def hello_world(): return 'Hello Flask' if __name__ == '__main__': app.run() ``` 这段代码定义了一个Flask应用,并设置了一个路由`/`,当访问应用的根URL时,它将返回"Hello Flask"。运行这个程序,然后在...

    node.js实现本地WEB服务器

    在IT行业中,Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许开发人员使用JavaScript进行后端开发。本篇文章将深入探讨如何使用Node.js来搭建一个本地的WEB服务器,以便于开发、测试和托管静态资源。 ...

    用VueJS写一个Chrome浏览器插件的实现方法

    浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研究浏览器本身的代码。你可以用HTML,CSS和JavaScript创建新的扩展程序,如果你曾经写过网页,那么写一个插件是非常轻松的事情。 常见的...

    Node.js安装与配置环境(最新)

    Node.js是一款基于Chrome V8引擎的JavaScript运行环境,它允许开发者在服务器端使用JavaScript进行编程。这个技术的出现,打破了JavaScript只能在浏览器中运行的传统,极大地扩展了JavaScript的应用范围。以下将详细...

    Node安装与部署.docx

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它让开发者能够在服务器端使用 JavaScript 编程,极大地扩展了 JavaScript 的应用范围。本文将详细解析Node.js的安装与部署过程,以帮助初学者顺利入门。...

    NodeJS在WIN环境下的搭建

    Node.js是一款基于Chrome V8引擎的JavaScript运行环境,它让JavaScript可以在服务器端执行,极大地扩展了JavaScript的应用范围。本教程将详细讲解如何在Windows操作系统上安装并配置Node.js的开发环境。 **1. 下载...

    后端开发-详细教程&案例

    res.send('Hello World!'); }); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); ``` 这段代码设置了最基本的 HTTP 服务,当...

    artDialog_Demo

    28、对于简单的消息可以使用简写: artDialog('hello world') 29、让IE6支持覆盖下拉控件的同时也支持透明皮肤 30、优化锁屏渐变动画 31、修复范围限制函数没有生效的错误 32、修复一处笔误,忘记声明变量导致...

    《iPhone开发实战》.(Christopher Allen).pdf

    11.2 在xcode中创建第一个项目:hello, world!149 11.2.1 理解main.m149 11.2.2 理解应用程序委托150 11.2.3 编写“hello, world!”151 11.3 在xcode中新建类154 11.3.1 新类简介154 11.3.2 头文件154 ...

    Servidor-Node:Aprendendo servitor节点http

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许开发者在服务器端使用JavaScript进行编程,特别适合构建高性能、可扩展的网络应用。 在描述中,“Aprendendo servidor节点http”进一步强调了学习目标...

    node-intro:使用node的第一个实践

    在IT行业中,Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许开发者使用JavaScript进行服务器端编程。本文将深入探讨“node-intro:使用node的第一个实践”这一主题,主要针对初学者,帮助他们理解Node...

    节点服务器

    在IT行业中,节点服务器(Node.js Server)是一种基于Chrome V8引擎的JavaScript运行环境搭建的服务器,它允许开发者使用JavaScript进行服务器端编程。标题“节点服务器”表明我们将探讨如何使用Node.js创建一个...

    node-server-setup-express

    res.send('Hello World!'); }); ``` 这里,`app.get` 方法定义了一个处理 GET 请求的路由。 2. **中间件**:Express 中间件是一种函数,可以访问请求对象 (`req`)、响应对象 (`res`) 和应用程序的下一个中间件...

    NodeJs-restAPI

    res.send('Hello World!'); }); app.listen(3000, () => console.log('Server is running on port 3000')); ``` 3. **处理HTTP请求** 使用Express的不同方法(如`app.get()`、`app.post()`等)来处理HTTP请求...

    nodejs-learn-code:nodejs学习代码

    新建一个名为 `index.js` 的文件,然后输入 `console.log('Hello, World!')`,运行 `node index.js` 即可看到输出。 3. **模块系统**:Node.js 使用 CommonJS 规范,允许你通过 `require` 导入模块,并使用 `module...

    visual studio code 编译运行html css js文件的教程

    <h1>Hello, World! ``` 3. **运行HTML文件**: - 使用`Live Server`:点击右下角的"Go Live"图标,或使用快捷键`Ctrl + L, Ctrl + O`,浏览器会自动打开并显示HTML页面。 - 使用`Open in Browser`:在HTML...

Global site tag (gtag.js) - Google Analytics