chrome 浏览器扩展(1)

基本概念

HTML、css、js、图片、其它 => 压缩文件

本质:web页面、所有浏览器提供的api

扩展与web页面交互

扩展与服务器交互

content script

cross-origin

xmlhttprequests

扩展访问浏览器提供的内部功能:标签、书签

扩展界面

browser action

page action

content script(注入到页面内执行的脚本)

扫描二维码关注公众号,回复: 6458093 查看本文章

通过其它方式提供界面:

加入到上下文菜单

提供一个选项页面

用一个content script 改变页面的显示

webApp界面

文件

manifest

html

js

其它、图片

以上文件都放在同一目录下

发布打包为 .crx

使用Chrome Developer Dashboard,上传应用(扩展)-> 会自动生成 .crx文件

引用文件

<img src="images/myimage.png">
复制代码
chrome-extension://<extensionID>/<pathToFile>
复制代码
chrome://extensions
复制代码
{
    "name": "My Extension",
    "version": "2.1",
    "description": "Gets information from Google.",
    "icons": { "128": "icon_128.png" },
    "background_page": "bg.html",
    "permissions": ["http://*.google.com/", "https://*.google.com/"],
    "browser_action": {
        "default_title": "",
        "default_icon": "icon_19.png",
        "default_popup": "popup.html"
    }
}
复制代码

基本架构

background page

页面

browser action

popup

Content script

Content script脚本是指能够在浏览器已经加载的页面内部运行的javascript脚本

可以将content script看作是网页的一部分,而不是它所在的应用(扩展)的一部分。

Content script可以获得浏览器所访问的web页面的详细信息,并可以对页面做出修改。

一个content script可以读取并修改当前页面的DOM树。

它并不能修改它所在应用(扩展)的背景页面的DOM树

Content script与它所在的应用(扩展)并不是完全没有联系。一个content script脚本可以与所在的应用(扩展)交换消息

例如,当一个content script从页面中发现一个RSS种子时,它可以发送一条消息。或者由背景页面发送一条消息,要求content script修改一个网页的内容。

页面间通信

一个应用(扩展)中的HTML页面间经常需要互相通信

一个应用(扩展)的所有页面是在同一个进程的同一个线程中运行的

因此它们之间可以直接互相调用各自的函数。

可以使用chrome.extension中的方法来获取应用(扩展)中的页面,例如getViews()和getBackgroundPage()。一旦一个页面得到了对应用(扩展)中其它页面的引用,它就可以调用被引用页面中的函数,并操作被引用页面的DOM树。

保存数据、隐身模式

web Storage API localStorage

向服务器发送请求

猜你喜欢

转载自blog.csdn.net/weixin_33698043/article/details/91383355
今日推荐