开发 Chrome 浏览器插件入门

已于 2024-05-01 22:54:51 修改
阅读量2.8k 收藏 26
点赞数 30
分类专栏： 前端 文章标签： chrome 前端 edge浏览器
于 2024-04-27 10:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aicsswo/article/details/138230594
版权

目录

前言

一，创建插件

1.创建一个新的目录

2.编写清单文件

二，高级清单文件

1.编写放置右窗口

2.常驻的后台JS或后台页面

3.event-pages 短周期使用

三，Chrome 扩展 API 函数

1.浏览器操作函数

2.内容脚本函数

3.后台脚本函数

4.其他函数

四，Chrome 扩展 API 函数示例

1.浏览器操作函数

2.内容脚本函数

3.后台脚本函数

4.其他函数

五，manifest.json 

1.必填字段

2.可选字段

3.权限

前言

简介

Chrome 插件是扩展 Chrome 浏览器的功能的软件程序。它们可以执行各种任务，例如阻止广告、增强隐私、添加新功能等等。

要开始编写 Chrome 插件，你需要掌握以下：

1.JavaScript语言

2.html

3.css

4.会使用chrome扩展开发手册

一，创建插件

1.创建一个新的目录

这个目录你可以在任何地方创建如图1，例如 我在D:\桌面\javascript\chrome下创建文件夹my-extension。

图1
图1

2.编写清单文件

清单文件 (manifest.json) 定义了插件的基本信息，例如其名称、版本、权限和内容脚本。

在目录中创建一个文件，进入my-extension文件夹创建一个mainfest.json文件如图2

图2

编写miaifest.json文件输入:



{
  "manifest_version": 2,
  "name": "big Big",
  "version": "1.1.0",
  "description": "big测试哦",
  "icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
  "content_scripts": [
    {
      "matches": ["https://www.baidu.com/*", "http://www.qq.com/*"],
      "js": ["content-script.js"]
    }
  ]
}
  • manifest_version： 清单文件的版本。
  • name： 插件的名称。
  • version： 插件的版本。
  • content_scripts： 在特定网页上运行的内容脚本列表。

  • description ：脚本描述。

  • icons： 图标 

例如



{
  "manifest_version": 2,
  "name": "big Big",
  "version": "1.1.0",
  "description": "big测试哦",
  "icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
  "content_scripts": [
    {
      "matches": ["https://www.baidu.com/*", "http://www.qq.com/*"],
      "js": ["content-script.js"]
    }
  ]
}

设置一个清单文件的版本为：2

插件的名称：big Big

插件的版本： 1.1.0

matches: 表示在baidu。qq网页上显示特定的脚本

content-script.js: 表示js脚本

在创建一个content-script.js文件编写如图3：

图3

我们还需要创建一个小图标文件夹img放入icon.png图片如图4，

这里我们需要导入插件了如图5

图5

添加插件选择创建的文件夹如图6

图6

添加成功后出现如图7代表添加成功了，

图7

现在我开始测试，

这里这是一个测试js作用于百度，qq网页开在浏览器调试模式看到如图8插件已经编写完成了。

二，高级清单文件

1.编写放置右窗口

类似于如图9小窗口，

图9

我们在编写一个新的manifest.json文件（你也可以把上面测试的manifest.json改以下就可以了）



{
  "manifest_version": 2,
  "name": "big Big",
  "version": "1.1.0",
  "description": "big测试哦",
  "icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},

 

  "browser_action": {
    "default_icon": { 
            "16": "img/icon.png", 
            "24": "img/icon.png", 
            "32": "img/icon.png" 
        },
    "default_title": "Big", 
    "default_popup": "popup.html" },

  "content_scripts": [
    {
      "matches": ["https://www.baidu.com/*", "http://www.qq.com/*"],
      "js": ["content-script.js"]
    }
  ]
}

//例如  都是可以的

"action": {

    "default_icon": "icons/icon.png",

    "default_title": "Popup Title",

    "default_popup": "index.html"

  }

我们在添加插件方法同上如图10显示不存在页面，

图10

这是时候我们在创建一个popup.html文件在同目录里面如图11，

图11

这里我只是测试以下如图12编写保存，你可以把它想象成一个网页，

图12

这时候我刷新浏览器是可以看到如图13，可以看到它就是一个小页面，

图13

用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标 如果你想创建一个不总是可见的图标, 可以使用page action来代替browser action default_popup当用户点击图标后出现，popup可以包含任意你想要的html内容，并且会自适应大小

2.常驻的后台JS或后台页面

Background Script 是 Chrome 扩展程序中的一种后台脚本，在扩展程序安装后立即加载，并在扩展程序的整个生命周期中一直保持活动状态。与 Event Page 不同，Background Script 不专门用于处理事件，而是可以执行各种任务，例如：

  • 与服务器通信
  • 管理其他脚本
  • 处理定时任务
  • 在后台执行计算

用途

Background Script 通常用于以下类型的任务：

  • 后台处理： 执行不需要用户交互的后台任务，例如与服务器通信或处理数据。
  • 跨域通信： 在不同的域之间进行通信，例如与内容脚本或来自不同域的 iframe 通信。
  • 定时任务： 定期执行任务，例如检查更新或发送通知。

使用

要使用 Background Script，请在清单文件中声明它：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
  "background": {
    "scripts": ["background.js"]
  }
}

然后，在 background.js 文件中编写脚本逻辑：

// background.js

// 与服务器通信
fetch('https://example.com/api/data').then(response => {
  // 处理响应
});

// 定时任务
setInterval(() => {
  // 定期执行的任务
}, 60000);

注意：

  • Background Script 在默认情况下是持久的（persistent: true），这意味着它在扩展程序卸载之前一直保持活动状态。
  • Background Script 无法直接访问 DOM，因此它需要与内容脚本或其他后台脚本通信以与网页交互。
//方式一
"background":
	{
		
		"page": "background.html"
		
	},

//方式二
"background":
	{
		"scripts": ["js/background.js"]
	},

如图14当我刷新后出现 ”背景页“。

图14

3.event-pages 短周期使用

Event Page 主要用于处理以下类型的事件：

  • 浏览器事件：例如 onInstalled、onUpdated 和 onMessage。
  • 自定义事件：由内容脚本或其他后台脚本触发。

优点

使用 Event Page 的优点包括：

  • 事件处理集中： 所有事件处理逻辑都集中在一个脚本中，便于维护和调试。
  • 持续监听： Event Page 在扩展程序的整个生命周期中保持活动状态，因此它可以随时处理事件。
  • 跨域通信： Event Page 可以与内容脚本和来自不同域的 iframe 进行通信。

使用

要使用 Event Page，请在清单文件中声明它：

 "background": {
    "persistent": false,
    "scripts": ["event-page.js"]
  }

然后，在 event-page.js 文件中编写事件处理逻辑：

// event-page.js

chrome.runtime.onInstalled.addListener(() => {
  // 在插件安装后执行代码
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 在收到来自内容脚本或其他后台脚本的消息后执行代码
});

示例

以下是一个使用 Event Page 处理来自内容脚本消息的示例：

清单文件 (manifest.json)：



{
  "manifest_version": 2,
  "name": "big Big",
  "version": "1.1.0",
  "description": "big测试哦",
  "icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},

  "background": {
    "persistent": false,
    "scripts": ["event-page.js"]
  },

  "browser_action": {
    "default_icon": { 
            "16": "img/icon.png", 
            "24": "img/icon.png", 
            "32": "img/icon.png" 
        },
    "default_title": "Big", 
    "default_popup": "popup.html" },

  "content_scripts": [
    {
      "matches": ["https://www.baidu.com/*", "http://www.qq.com/*"],
      "js": ["content-script.js"]
    }
  ]
}

内容脚本 (content-script.js)：

// content-script.js

chrome.runtime.sendMessage({message: 'Hello from content script!'}, (response) => {
  console.log(response.message);
});

Event Page (event-page.js)：

// event-page.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('Received message from content script:', request.message);
  sendResponse({message: 'Hello from event page!'});
});

重新加载插件看到如图15

注意：

  • Event Page 在默认情况下是持久的（persistent: true），这意味着它在扩展程序卸载之前一直保持活动状态。但是，对于大多数用例，将其设置为非持久（persistent: false）就足够了。
  • Event Page 不能直接访问 DOM，因此它需要与内容脚本或其他后台脚本通信以与网页交互。

三，Chrome 扩展 API 函数

Chrome 扩展 API 提供了各种函数，使扩展程序能够与浏览器、网页和系统交互。以下是几个常用的函数：

1.浏览器操作函数

  • chrome.browserAction.onClicked： 在单击浏览器操作按钮时触发。
  • chrome.tabs.create： 创建一个新的选项卡。
  • chrome.windows.create： 创建一个新的窗口。
  • chrome.storage.sync.get： 从存储中获取数据。
  • chrome.storage.sync.set： 将数据存储到存储中。
  • chrome.tabs.query()：查询当前窗口中的选项卡。
  • chrome.tabs.update()：更新选项卡的属性。

2.内容脚本函数

  • document.addEventListener： 监听 DOM 事件。
  • document.querySelector： 选择一个 DOM 元素。
  • document.createElement： 创建一个新的 DOM 元素。
  • XMLHttpRequest： 发送 HTTP 请求。
  • fetch： 发送异步 HTTP 请求。

3.后台脚本函数

  • chrome.runtime.onInstalled： 在扩展程序安装后触发。
  • chrome.runtime.onMessage： 在收到来自内容脚本或其他后台脚本的消息时触发。
  • chrome.alarms.create： 创建一个闹钟。
  • chrome.alarms.clearAll： 清除所有闹钟。
  • chrome.notifications.create： 创建一个通知。

4.其他函数

  • chrome.identity.getAuthToken： 获取用于身份验证的令牌。
  • chrome.i18n.getMessage： 获取本地化消息。
  • chrome.permissions.request： 请求额外的权限。
  • chrome.webRequest.onBeforeRequest： 在发出网络请求之前触发。
  • chrome.webRequest.onCompleted： 在完成网络请求后触发。
  • chrome.identity.getProfileUserInfo()：获取当前用户的个人资料信息。
  • chrome.notifications.create()：创建桌面通知。
  • chrome.contextMenus.create()：创建上下文菜单项。
  • chrome.webRequest.onBeforeRequest.addListener()：监听 HTTP 请求。

四，Chrome 扩展 API 函数示例

1.浏览器操作函数

要使用浏览器操作按钮，你需要在清单文件中声明 browser_action 权限在调用，如下所示：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["<all_urls>"]
}

然后，你可以在后台脚本中使用 chrome.browserAction.onClicked 函数来监听浏览器操作按钮的点击事件，如下所示：

// background.js

chrome.browserAction.onClicked.addListener(() => {
  alert('Button clicked!');
});
  • chrome.browserAction.onClicked： 在单击浏览器操作按钮时触发。
chrome.browserAction.onClicked.addListener(() => {
  alert('Button clicked!');
});
  • chrome.tabs.create： 创建一个新的选项卡。
chrome.tabs.create({url: 'https://www.example.com'});
  • chrome.windows.create： 创建一个新的窗口。
chrome.windows.create({url: 'https://www.example.com'});

2.内容脚本函数

要使用内容脚本，你需要在清单文件中声明 content_scripts 权限，如下所示：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["content-script.js"]
    }
  ],
  "permissions": ["<all_urls>"]
}

然后，你可以在内容脚本中使用各种 DOM 函数和 XMLHttpRequest 对象来与网页交互，如下所示：

// content-script.js

document.addEventListener('click', (event) => {
  console.log(event.target.id);
});

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.example.com/api/data');
xhr.onload = () => {
  console.log(xhr.responseText);
};
xhr.send();
  • document.addEventListener： 监听 DOM 事件。
document.addEventListener('click', (event) => {
  console.log(event.target.id);
});
  • document.querySelector： 选择一个 DOM 元素。
const button = document.querySelector('#my-button');
  • document.createElement： 创建一个新的 DOM 元素。
const newElement = document.createElement('div');
  • XMLHttpRequest： 发送 HTTP 请求。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.example.com/api/data');
xhr.onload = () => {
  console.log(xhr.responseText);
};
xhr.send();
  • fetch： 发送异步 HTTP 请求。
fetch('https://www.example.com/api/data').then(response => {
  response.json().then(data => {
    console.log(data);
  });
});

3.后台脚本函数

你需要在清单文件中声明 background 权限，如下所示：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["<all_urls>"]
}

然后，你可以在后台脚本中使用各种 Chrome 扩展 API 函数来执行各种任务，

例如：

// background.js

chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed!');
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log(request.message);
  sendResponse({message: 'Response from background script!'});
});

chrome.alarms.create('my-alarm', {delayInMinutes: 1});

chrome.notifications.create('my-notification', {
  title: 'My Notification',
  message: 'This is a notification!',
  iconUrl: 'icon.png'
});
  • chrome.runtime.onInstalled： 在扩展程序安装后触发。
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed!');
});
  • chrome.runtime.onMessage： 在收到来自内容脚本或其他后台脚本的消息时触发。
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log(request.message);
  sendResponse({message: 'Response from background script!'});
});
  • chrome.alarms.create： 创建一个闹钟。
chrome.alarms.create('my-alarm', {delayInMinutes: 1});
  • chrome.alarms.clearAll： 清除所有闹钟。
chrome.alarms.clearAll();
  • chrome.notifications.create： 创建一个通知。
chrome.notifications.create('my-notification', {
  title: 'My Notification',
  message: 'This is a notification!',
  iconUrl: 'icon.png'
});

4.其他函数

你需要在清单文件中声明相应的权限，然后在扩展程序的脚本中使用函数。例如，要使用 chrome.identity.getAuthToken 函数，你需要声明 identity 权限：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
  "permissions": ["identity"]
}
  • chrome.identity.getAuthToken： 获取用于身份验证的令牌。
chrome.identity.getAuthToken({interactive: true}, (token) => {
  console.log(token);
});
  • chrome.i18n.getMessage： 获取本地化消息。
const message = chrome.i18n.getMessage('my_message');
  • chrome.permissions.request： 请求额外的权限。
chrome.permissions.request({permissions: ['clipboardRead']}, (granted) => {
  if (granted) {
    console.log('Permission granted!');
  } else {
    console.log('Permission denied!');
  }
});
  • chrome.webRequest.onBeforeRequest： 在发出网络请求之前触发。
chrome.webRequest.onBeforeRequest.addListener((details) => {
  console.log(details.url);
}, {urls: ['<all_urls>']});
  • chrome.webRequest.onCompleted： 在完成网络请求后触发。
chrome.webRequest.onCompleted.addListener((details) => {
  console.log(details.statusCode);
}, {urls: ['<all_urls>']});

五，manifest.json 

manifest.json 是一个 JSON 文件，它描述了 Chrome 扩展程序的基本信息和功能。它位于扩展程序的根目录中，并且必须遵循特定的格式。

1.必填字段

  • name: 扩展程序的名称。显示在 Chrome 网上应用店和浏览器中。
  • version: 扩展程序的版本号。遵循语义版本控制约定（例如，1.2.3）。
  • manifest_version: manifest.json 文件的版本号。当前版本为 3。

2.可选字段

  • description: 扩展程序的简要描述。显示在 Chrome 网上应用店中。
  • icons: 一个对象，其中包含扩展程序图标的路径和大小。图标大小必须是 16x16、48x48 和 128x128 像素。
  • permissions: 一个数组，其中包含扩展程序所需的权限。有关权限的更多信息，请参见下文。
  • background: 一个对象，其中包含后台脚本的路径。后台脚本在扩展程序安装后立即运行，并且可以在后台持续运行。
  • content_scripts: 一个数组，其中包含内容脚本的配置。内容脚本在特定网站上运行，可以访问 DOM 和执行 JavaScript 代码。
  • browser_action: 一个对象，其中包含浏览器操作按钮的配置。浏览器操作按钮显示在浏览器的工具栏中。
  • page_action: 一个对象，其中包含页面操作按钮的配置。页面操作按钮显示在特定网站的地址栏中。
  • options_page: 选项页面的路径。选项页面允许用户配置扩展程序的设置。
  • web_accessible_resources: 一个数组，其中包含扩展程序可以访问的 Web 可访问资源的路径。Web 可访问资源可以是 HTML、CSS 或 JavaScript 文件。

3.权限

  • "tabs": 允许扩展程序管理选项卡。这包括创建、更新和删除选项卡，以及获取选项卡信息。
  • "storage": 允许扩展程序访问浏览器存储。这包括同步存储（在所有设备上可用）和本地存储（仅在当前设备上可用）。
  • "webRequest": 允许扩展程序拦截和修改 HTTP 请求。这可用于阻止广告、重定向请求或注入脚本。
  • "notifications": 允许扩展程序创建桌面通知。
  • "identity": 允许扩展程序访问用户个人资料信息。这包括姓名、电子邮件地址和头像。

示例 manifest.json

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "description": "This is my Chrome extension.",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "tabs",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["content_script.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icon48.png",
    "default_popup": "popup.html"
  }
}

冻风
关注
  • 30
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端拓展：如何开发一个 Chrome 插件？，阿里+头条+抖音+百度+蚂蚁+京东面经
m0_61331491的博客
03-21 1262
当页面运行之后，脚本内容也会在插件定义的时间运行，当页面点击按钮时，会出现两次弹窗。content-scripts配置：// 在匹配的URL中运行，表示所有的URL都会运行。// 注入的js,会按顺序运行。// css引入需谨慎，因为可能会影响全局的样式,同样也能接收多个css文件，会按顺序插入到页面中。
chrome插件开发入门教程
09-21
chrome插件开发入门教程
Chrome 扩展插件开发 pdf
11-04
适合浏览器插件开发入门。。。。。。。。。。。。。。。。。。。
从零开始，轻松打造个人化Chrome浏览器插件
Twinkle_sone的博客
11-30 1010
想象一下，你是否曾经希望能够拥有一个专属于自己的Chrome浏览器插件，能够满足你特定的需求和兴趣？本文将带你了解如何快速创建个人化的Chrome浏览器插件，无论是增强浏览体验、提高工作效率，还是添加个性化功能，你都可以在几个简单步骤内实现。无需编程背景，只需跟随本文指南，你也可以成为自己的插件设计师！
使用Vue.js开发Chrome浏览器插件：从零到一
qq_44285141的博客
10-20 5671
Chrome浏览器插件是一种强大的工具，它可以为用户提供更丰富的浏览体验。在本篇博客中，我们将探讨如何使用Vue.js框架来构建一个Chrome浏览器插件。
【实用工具】谷歌浏览器插件开发指南
wenchun001的博客
10-05 5786
本指南主要是对Chrome插件的官方开发文档做了翻译、理解和实践，只适合小白学习。如果你已经掌握了Chrome插件的开发，那么该指南便没有阅读的意义；再如果你在插件开发过程中遇到了疑难杂症，那么该指南也无法为你提供解答方案和思路。
10分钟带你入门chrome(谷歌)浏览器插件开发
热门推荐
Riqk_Qin的专栏
05-02 1万+
整理chrome插件有哪些能力，插件开发入门，整理文档。 chrome谷歌浏览器插件开发，听上去很高大上，其实只要熟悉HTML、CSS、JS即可开发，插件也是将html页面渲染出来并执行js脚本而已。 插件能做哪些事？ 书签控制； 下载控制； 窗口控制； 标签控制； 网络请求控制， 各类事件监听； 自定义原生菜单； 完善的通信机制； 简介 扩展程序主要名词 Manifest （清单文件） Background Script （后台脚本） UI Elements （页面...
从零入门Chrome插件开发
萌萌哒的瑞萌萌的博客
11-06 6560
谷歌浏览器在推出时就以其快速、安全和简洁的特点受到了广大用户的欢迎。随着浏览器的不断发展，谷歌为用户提供了插件开发平台，使开发者能够为浏览器添加各种功能和定制化选项。从此，插件成为了提升用户体验和个性化的重要工具。谷歌浏览器插件是一种小型程序，可以增强浏览器的功能。谷歌浏览器插件使用HTML、CSS和JavaScript等网页开发技术，开发者可以使用这些技术来创建自己的谷歌浏览器插件。
编写谷歌浏览器插件入门
二木成林
07-11 5353
概述 学习目标：如何开发一个简单的浏览器插件。 学习前提：HTML、CSS、JavaScript基础 官方文档：http://chrome.cenchy.com 入门 其实跟着官方的说明文档就能很快入门，而且是中文文档。 第一步，在电脑本地的任意位置创建一个文件夹，名为HelloWorld，也可以叫其他名字。 第二步，在HelloWorld文件夹下创建一个名为manifest.json的文件，必须叫这个名字。内容如下： { "manifest_version": 2, "na
Chrome浏览器抢票插件的制作与插件工具源码
01-14
这是【Chrome浏览器抢票插件的制作与插件工具】博客的Chrome浏览器抢票插件的源码和Chromex工具，更多说明详见：http://blog.csdn.net/KingWTD/article/details/54425903和http://blog.csdn.net/kingwtd/article/details/54425999。
腻害360安全浏览器插件开发小例子
03-22
腻害360安全浏览器插件开发小例子,自己开发通过，非常好
QT浏览器插件开发入门[收集].pdf
10-12
QT浏览器插件开发入门主要涉及的是在QT框架下创建适用于不同浏览器的插件，包括ActiveX控件和NPAPI插件。这些插件允许开发者扩展浏览器的功能，为用户提供定制化的浏览体验。 首先，ActiveX控件是专为基于IE内核的...
简单入门的chrome插件源码
01-16
这是一套完整的chrome浏览器插件学习源码，基于vue.js，涵盖了manifest.json基本配置、background后台数据运行、ajax请求、localStorage本地数据操作等常见功能，非常适合插件入门学习。
Chrome扩展程序-Demo.zip
06-29
学习编写浏览器扩展程序的入门Demo
chrome插件开发流程（超全）
weixin_43898997的博客
09-19 1万+
对于一直从事前端开发者的你，在未开发过任何插件的前提下，肯定会很想知道，chrome插件开发和普通网页开发有什么区别呢？ 如何从0开始着手开发chrome插件呢？下面跟随这片文章来一起学习chrome插件的开发的流程吧～
前端拓展：如何开发一个 Chrome 插件？，web接口开发
最新发布
2401_84097427的博客
04-05 1006
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载ndow: true} 表示查找当前屏幕下的active状态的tab;自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
Chrome 插件开发
windrainpy的博客
04-06 1万+
Chrome 插件开发 参考 官方文档：https://developer.chrome.com/extensions 中文文档（360浏览器）：http://open.chrome.360.cn/extension_dev/overview.html websocket 小示例：https://www.runoob.com/html/html5-websocket.html 注意 调试：打...
快速开发chrome浏览器插件
10-08
快速开发Chrome浏览器插件有多种方法和技术可供选择。一种常用的方法是使用JavaScript、HTML和CSS来编写插件的前端代码，使用Chrome插件 API 来实现与浏览器的交互。你可以使用Vue.js或React等前端框架来快速构建插件界面。 下面是一个简单的步骤来帮助你快速开发Chrome浏览器插件： 1. 创建一个新的文件夹作为你的插件项目文件夹。 2. 在项目文件夹中创建一个`manifest.json`文件，用于描述插件的基本信息和功能。在`manifest.json`中，你需要提供插件的名称、版本、描述、图标、权限等信息。 3. 在项目文件夹中创建一个HTML文件作为插件的主界面。你可以使用HTML和CSS来设计和布局插件的界面。 4. 编写插件的前端逻辑，包括处理用户交互、与浏览器的通信等。你可以使用JavaScript和Chrome插件 API来实现这些功能。 5. 在`manifest.json`中注册你的前端代码和资源文件，以便Chrome浏览器加载和运行插件。 6. 在Chrome浏览器中测试你的插件。你可以通过在浏览器的扩展管理页面加载插件来进行测试和调试。 7. 完成插件的开发后，你可以将插件打包为一个`.crx`文件，并发布到Chrome Web Store 或者通过其他方式进行发布和分享。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值