[Tools] Create a Chrome Extension

Creating a Chrome extension requires a manifest.json file which defines how your extension will behave. With a minimal setup, you can already manipulate pages and change elements. This lesson walks you through creating a manifest.json file which will essentially "block" twitter and reddit and tell you to get back to work.

manifest.json:

{
    "name": "Back to Work!!",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [{
        "js": ["inject.js"],
        "matches": [
            "https://twitter.com/*",
            "https://*.reddit.com/*"
        ]
    }]
 }

inject.js:

document.body.innerHTML = `
  Back to Work!!
`

Go to chrome://extensions .

Click "Load unpacked" folder.

Then when you visit twitter, it will show "Back to Work!!" in html.

原文地址:https://www.cnblogs.com/Answer1215/p/9656531.html

时间: 2024-10-10 09:44:47

[Tools] Create a Chrome Extension的相关文章

Chrome Extension 检查视图(无效)处理方法

最近闲来无事,简单看了下Chrome扩展的开发,并且开发一个小小的翻译插件(TranslateBao)作为练手,开发细节不详述了,如果有新学习chrome extension开发的新人,可以参考源码,并欢迎提出宝贵意见,共同进步. 闲话不多说,在一个Demo版开发完成后,载入到Chrome中进行体验,一切感觉良好...(-.-),但是,遇到一个感觉很不爽的东西,见下图: 没错,问题就是在“检查视图:background.html”后面有一个“无效”,虽然没有发现具体影响到什么地方,但是这么一个负

Chrome Extension 的 webRequest模块的解读

Chrome Extension 的 webRequest模块的解读 文档在此:http://developer.chrome.com/trunk/extensions/webRequest.html 1,为了使用webRequest,首先需要在配置文件manifest.json中加入类似的内容: { “name": "My extension", ... "permissions": { "webRequest", "*:/

chrome extension message passing 消息传递

Chrome插件开发笔记 360翻译了Chrome插件开发的文档   (仍然建议出去看看) 看这里http://open.chrome.360.cn/extension_dev/overview.html 什么是扩展 一个应用(扩展)其实是压缩在一起的一组文件,包括HTML,CSS,Javascript脚本,图片文件,还有其它任何需要的文件. 应用(扩展)本质上来说就是web页面,它们可以使用所有的浏览器提供的API,从XMLHttpRequest到JSON到HTML5全都有. 扩展extens

[label][Chrome-Extension] How to start Chrome Extension's development

Firstly , you should read these two pages. https://developer.chrome.com/extensions/overview https://developer.chrome.com/extensions/getstarted Secondly, you must read this page. https://developer.chrome.com/extensions/packaging [label][Chrome-Extensi

解决chrome extension无法下载的问题

由于GFW把谷歌应用商店给屏蔽了,下载chrome扩展变得很困难. 我使用的是版本30.0.1599.101 m. 那么你需要做的第一个处理是,修改host文件,保证chrome应用商店可以登录.如下链接可登陆https://chrome.google.com/webstore. 之后到http://www.chrome-extension-downloader.com/中下载chrome-extension-downloader,可以直接安装到chrome中.如果遇到该扩展自动被禁止的情况,可

如何做一个简单的Chrome Extension用于网页截屏

Chrome extension是一个文件包,里面包含了一个配置文件manifest.json,以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等). Chrome Extension开发指南 Chrome Extension Overview Chrome Extension Debugging Chrome Extension Samples 如何实现网页截屏功能 看一下manifest文件: {       "name": "Scree

Chrome Extension 扩展程序 小白入门

Chrome Extension 扩展程序 前请说明:本文适用于之前从来没有接触过chrome extension扩展程序的同学~ 编写demo 创建项目文件夹chrome_ext_demo,在项目根路径(chrome_ext_demo/)下创建 manifest.json 在manifest.json中添加如下示例(只是个简单例子,详细字段说明可参考官方文档): { "name":"Chrome Extension demo", "version&quo

How does Chrome Extension crx Downloader work? ——— From crxdown.com

How does Chrome Extension crx Downloader work? Home >> blog >> How does Chrome Extension crx Downloader work? Author:admin    Date:11 2017/07    Cotyright©crxDown.com Generally Even Chrome has to connect to a server and download the extension

[Tools] Create your own mobile emulator device by using Chrome dev tool

Using the New Device Emulation Interface The Device Emulation interface changed a bit with the newer version of Chrome Dev Tools. Here are the instructions for emulating the required device characteristics in the new UI: Select Edit from the Responsi