0
点赞
收藏
分享

微信扫一扫

开发 Chrome 浏览器插件入门

月孛星君 2024-05-02 阅读 38

目录

前言

一,创建插件

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": 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"]
    }
  ]
}



在创建一个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"]
    }
  ]
}



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

图10

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

图11

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

图12

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

图13


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":
	{
		
		"page": "background.html"
		
	},

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

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

图14


3.event-pages 短周期使用

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

优点

使用 Event Page 的优点包括:

使用

要使用 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


三,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.必填字段

2.可选字段

3.权限

示例 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"
  }
}

举报

相关推荐

0 条评论