CHROME插件： 求对这小段代码的详解

一、CHROME插件： 求对这小段代码的详解

chrome.tabs是对象，其中一个方法是executeScript，用于在用户当前页面执行指定代码。

.onClicked.addListener(function(tab) 这段代码，是给扩展图标，绑定onclick事件，即

用户点击扩展图标后，执行啥代码。

function(tab) 中的tab是Chrome默认支持的回调参数，返回当前用户正在浏览的页面（标签页）。

这个tab是对象（你也可以把tab改为其它对象名称），含一些属性，例如：

tab.url = 此标签页的URL

tab.title= 此标签页的页面标题

等等。

二、如何转换移植安装Chrome扩展到Win10 Edge浏览器

1

为了快速移植chrome插件和扩展到微软edge浏览器中，我们需要一个微软官方出品的免费兼容性调试和移植工具：Microsoft Edge Extension Toolkit

中文可称之为“微软Edge浏览器扩展工具箱”。

首先，我们在Win10操作系统中，

搜索微软官方应用商店的工具Microsoft Edge Extension Toolkit，并下载安装。

2

然后点击启动后，打开左上角的“load extension to convert”

注意，该工具也提供微软edge扩展的官方文档入口（点击右侧的document按钮）

3

然后，浏览选择chrome扩展所在文件夹（如果只有chrome插件的crx离线安装包，将crx文件重命名为zip文件，解压缩到一个文件夹即可）

这时，微软Edge浏览器扩展工具箱，会自动列出一些兼容性方面的错误信息提示。

4

该工具会自动在当前扩展文件夹中，新建若干Edge浏览器扩展必备文件。

5

同时，在manifest.json文件中，还会增加一些新的对Edge浏览器才有用的键值。

例如：

permissions: [ tabs, <all_urls>, unlimitedStorage, contextMenus, notifications, pageCapture, tabCapture, desktopCapture, downloads, downloads.open, downloads.shelf ],

-ms-preload: { backgroundScript: backgroundScriptsAPIBridge.js, contentScript: contentScriptsAPIBridge.js }

6

值得注意的是，edge扩展的manifest声明文件中，必须有author键值（chrome里是没有的），

例如：

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

这篇文章介绍如何通过几行简单的代码，创建一个用于网页截屏的Chrome extension。

chrome extension HTML5 JavaScript

目录[-]

Chrome Extension开发指南

如何实现网页截屏功能

安装运行Chrome Extension

Chrome extension是一个文件包，里面包含了一个配置文件manifest.json，以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等)。

Chrome Extension开发指南

Chrome Extension Overview

Chrome Extension Debugging

Chrome Extension Samples

如何实现网页截屏功能

看一下manifest文件：

{

name: Screenshot Extension,

version: 1.0,

description: A simple screenshot extension,

background: {

persistent: false,

scripts: [background.js]

},

content_scripts: [

{

matches : [], js: [content.js] } ], browser_action: { default_icon: camera.png, default_title: Screenshot }, permissions: [tabs, , activeTab], manifest_version: 2 } 注意： background.js是用于extension的，而content.js是用于和网页交互的。这两个文件之间要交互，需要通过消息传递机制。 permission的权限配置很重要，如果要让extension作用于所有的网页站点，就必须申明为。具体的各种权限可以参考 Google提供了一个API用于捕捉网页的可见区域： chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.captureVisibleTab(null, { format : png, quality : 100 }, function(data) { screenshot.data = data; }); }); 如果要实现全网页的截图，就必须要触发滚动，然后把所有的数据拼接起来。这里的data就是获取的图片数据。 为了让用户做出截屏的选择，创建一个content.js来和网页交互。从background.js发送消息到content.js询问是否需要做截屏操作。如果用户点击确认，把消息回传到background.js。 background.js chrome.tabs.query({ active : true, currentWindow : true }, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {ready : ready}, function(response) { if (response.download === download) { } }); }); content.js chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) { if (msg.ready === ready) { if (confirm('Do you want to capture the screen?')) { sendResponse({download : download}); } } }); 保存下载图片： saveScreenshot : function() { var image = new Image(); image.onload = function() { var canvas = screenshot.content; canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext(2d); context.drawImage(image, 0, 0); // save the image var link = document.createElement('a'); link.download = download.png; link.href = screenshot.content.toDataURL(); link.click(); screenshot.data = ''; }; image.src = screenshot.data; }, 安装运行Chrome Extension 在Chrome设置中勾上Developer mode 点击Load unpacked extension 打开一个网页，点击工具栏中的按钮 确认保存截屏

顶一下

(0)

0%

踩一下

(0)

0%