Chrome扩展开发指南
- 格式:doc
- 大小:245.84 KB
- 文档页数:26
1Connect the keyboard and mouse Connecter le clavier et la sourisConecte o teclado e o mouse2Connect the network cable — optionalConnecter le câble réseau — optionnelConecte o cabo de rede — opcional3Connect the displayConnecter l’affichage Conecte o monitorDisplayPort Connector Connecteur DisplayPort Conector DisplayPortOr | Or | OuHDMI Connector Connecteur HDMIConector HDMINOTE: You have to switch the display’s input source to HDMI or DisplayPortafter turning on the display.REMARQUE : Vous devez faire passer la source d’entrée à HDMI ou DisplayPort après avoir activé l’affichage.NOTA: Você precisa mudar a origem da entrada para HDMI ou DisplayPortdepois de ligar o monitor.4Connect the power cableConnecter le câble d’alimentationConecte o cabo de alimentação5Turn on your ChromeboxMettre sous tension la ChromeboxLigue o seu Chromebox6Finish Chromebox setupTerminer la configuration de la Chromebox Conclua a configuração do ChromeboxConnect to your networkConnectez-vous au réseau Faça a conexão à redeWait for update to finishPatientez pendant la mise à jour Espere a conclusão da atualizaçãoSign in to your Google account or create a new accountConnectez-vous à votre compteGoogle ou créez un nouveau compte Eentre na sua conta do Google ou crie uma nova contaYour Chromebox will restart after Google update.Votre Chromebox redémarrera après la mise à jour Google. Seu Chromebox será reinicializado depois da atualização do Google.FeaturesCaractéristiques | Recursos1. Power cable connector2. Network connector3. USB 3.0 connectors4. HDMI connector5. DisplayPort connector6. Headset connector7. USB 3.0 connectors withPowerShare8. Power button/Power light 9. Memory-card reader 10. Recovery button 11. Security cable slot1. Connecteur du câble d’alimentation2. Connecteur réseau3. Connecteurs USB 3.04. Connecteur HDMI5. Connecteur DisplayPort6. Connecteur du casque7. Connecteurs USB 3.0 avecPowerShare8. Bouton d’alimentation/Voyantd’alimentation 9. Lecteur de carte mémoire 10. Bouton de restauration 11. Emplacement pour câble desécurité1. Conector do cabo de alimentação2. Conector de rede3. Conectores USB 3.04. Conector HDMI5. Conector DisplayPort6. Conector do headset7. Conectores USB 3.0 comPowerShare8. Botão liga/desliga e luz dealimentação 9. Leitor de cartão de memória 10. Botão de recuperação 11. Encaixe do cabo de segurança© 2014 Dell Inc.© 2014 Google Inc.Printed in the U.S.A.2014-087Register ChromeboxEnregistrer la Chromebox | Registre o Chromebox/support/registration8Take a tourVisite guidée | Faça uma tourGet started DémarrerComeçar a usarHelp CenterCentre d’aide | Centro de Ajuda /chromebookCommunityCommunauté | Comunidade/community Business and educationEntreprise et éducation | Negócios e educação /chrome/a/Dell ChromebookDell Chromebook | Dell Chromebook /dell Contact DellContacter Dell | Entrar em contato com a Dell/contactdellRegulatory and safetyRéglementation et sécurité | Normalização e segurança /regulatory_compliance Regulatory modelModèle réglementaire | Modelo de normalizaçãoZ01V Regulatory typeType réglementaire | Tipo de normalização Z01V001Computer modelModèle d’ordinateur | Modelo do computadorDell Chromebox 3010Información para NOM, o Norma Oficial MexicanaLa información que se proporciona a continuación se mostrará en los dispositivos que se describen en este documento, en conformidad con los requisitos de la Norma Oficial Mexicana (NOM):Importador:Dell México S.A. de C.V.Paseo de la Reforma 2620 - Piso 11.° Col. Lomas Altas 11950 México, D.F.Número de modelo reglamentario:Z01V Voltaje de entrada:19,5 VDC Corriente de entrada (máxima):3,34 AFor details on your Dell Limited Hardware Warranty and any service contracts you purchased (as detailed in your invoice), please visit the links below:Pour obtenir des informations détaillées sur la Garantie Matérielle Limitée Dell et sur n’importe lequel des contrats que vous avez acheté (comme indiqué sur votre facture), utilisez les liens ci-dessous :Para obter detalhes sobre sua Garantia Limitada de Hardware Dell e sobre qualquer contrato de serviço que você tenha comprado (como mostrado na sua fatura), visite os links abaixo:Dell Limited Hardware Warranty: /warrantyDell Consumer Service Contracts: /servicecontracts。
ChromeDevTools使用指南ChromeDevTools是一种由Google开发的功能强大的开发工具,旨在协助开发人员调试和优化Web应用程序。
本指南将介绍ChromeDevTools的主要功能和使用方法。
一、启动ChromeDevTools要在Chrome浏览器中启动ChromeDevTools,只需按下键盘上的F12键或通过右键单击页面并选择“检查”选项即可启动。
也可以使用快捷键CTRL+SHIFT+I(Windows)或CMD+OPTION+I(Mac)来启动ChromeDevTools。
二、主要功能1.元素面板元素面板允许开发人员查看和更改文档对象模型(DOM)。
调试时,可以使用它来查看元素的CSS和布局属性,并通过单击元素直接更改它们。
还可以在HTML和CSS代码中通过单击元素查找相应的代码行。
2.控制台控制台是一个交互式窗口,用于运行JavaScript代码和调试过程中的错误。
开发人员可以使用控制台来快速测试代码片段,并输出调试信息。
3.网络面板网络面板允许开发人员监视网页如何加载资源,包括JavaScript脚本、CSS文件、图像和其他文件。
通过该面板,可以查看每个请求的详细信息,并确定网页响应慢的原因。
4.源代码面板源代码面板允许开发人员在原始JS、CSS和HTML文件中查看和编辑代码。
还可以使用断点和调试器来调试JavaScript代码。
5.性能面板性能面板提供了有关Web应用程序性能的详细信息。
可以使用它来确定哪些函数和过程消耗了大量时间,并确定可用于提高应用程序性能的优化点。
三、使用技巧1.快速查找元素在Elements面板中,可以按CTRL+F(Windows)或CMD+F(Mac)快速查找元素。
只需输入要查找的文本,就可以在DOM树中高亮显示符合条件的元素。
2.调试JavaScript使用Sources面板中的调试器可以方便地调试JavaScript代码。
可以在源代码中单击断点,程序将在到达该行时停止执行。
插件(plugins)、扩展(extensions)与主题(themes)和语言包(languages)都是附加组件(Add-ons)不同种类。
插件与扩展是完全不同的东西。
Firefox:插件与扩展插件(Plugins/Plug-ins):它通常是第三方应用程序提供给firefox使用的二进制文件。
也就是说第三方应用程序把相关功能编译成了二进制的机器指令提供给各类浏览器,方便它们调用。
Firefox需要显示某些自身并不能显示的特定文件类型的时候,就会调用与之相关的第三方应用程序提供给firefox的插件来显示它。
插件的作用也在于此。
windows下的firefox插件通常是dll格式,linux下的通常是so格式。
例如,Adobe提供给firefox的插件“Adobe reader”使其能直接在浏览器里显示网络上的pdf 文档,而Adobe提供给firefox的另一个插件“Adobe shockwave flash”则使其能显示网页中嵌入的flash。
Microsoft提供的“Windows media player firefox plugin”使firefox能播放网页中嵌入的windows媒体(wmv、wma、asf以及对应的播放列表格式)。
扩展(extensions):它通常是扩展开发者为了修改或者增强firefox本身的功能而提供的一种打包格式。
它通常由包含功能代码的js脚本、包含界面的xul文件以及包含皮肤的css文件和各种图像文件组成。
少数特定平台下的扩展可能还会附带一些二进制文件。
∙Firefox扩展是什么?官方定义:它是用于给Firefox增加一些实用新功能的附加组件。
使用的技术:○XUL: 一种基于XML的用户界面语言○CSS,DOM,JavaScript○XPCOM: 跨平台的COM(COM 的全称是Component ObjectModel 组件对象模型。
)技术,基本原理与微软的COM类似○XPConnect: 将JavaScript和XPCOM连接起来,即可以让XPCOM组件被脚本化,在js代码中调用,也允许使用js来开发XPCOM组件开发,相当于“胶水”。
chromium 读取本地文件方法-概述说明以及解释1.引言1.1 概述在现代计算机系统中,浏览器已经成为人们日常生活中不可或缺的工具之一。
而Chromium作为一款开源的浏览器内核,被广泛应用于众多知名的浏览器中,如Google Chrome等。
Chromium的强大功能和灵活性使其备受开发者和用户的青睐。
本文旨在探讨Chromium浏览器如何读取本地文件的方法。
本地文件读取是一个常见的操作,有时我们需要从本地文件系统中获取数据或进行操作。
了解Chromium浏览器如何实现本地文件读取,对于开发人员和用户来说都具有重要意义。
通过深入研究Chromium浏览器的本地文件读取方法,可以帮助我们更好地理解Chromium的内部工作原理,为我们开发基于Chromium的应用程序提供更多灵活的选择。
同时,我们也将探讨本地文件读取方法可能存在的安全性考虑,帮助我们更好地保护用户的数据安全。
1.2 文章结构:本文将首先介绍Chromium浏览器的基本情况,包括其特点和功能。
接着将详细探讨Chromium浏览器中读取本地文件的方法,包括常用的技术和步骤。
最后,将讨论在使用Chromium浏览器读取本地文件时需要考虑的安全性问题,并提出相应的解决方案。
本文旨在帮助读者更好地理解Chromium浏览器的本地文件读取功能,提高软件应用的安全性和效率。
1.3 目的在本文中,我们的主要目的是探讨如何在Chromium浏览器中读取本地文件的方法。
Chromium作为一款开源的浏览器,在许多领域有着广泛的应用,其中包括Web开发、应用程序开发等。
通过了解Chromium浏览器的本地文件读取方法,我们可以更好地利用其功能,提高工作效率和开发效果。
另外,我们还将讨论本地文件读取方法涉及的安全性考虑,以确保用户数据的安全性和隐私保护。
通过本文的研究和探讨,我们希望能够为读者提供关于Chromium浏览器本地文件读取方法的全面指南,帮助他们更好地应用这一功能并加强安全意识。
你极⼒推荐的Chrome扩展有哪些?⾕歌浏览器 Chrome 是我们最常⽤的浏览器之⼀,⽽Chrome浏览器⾃带的开发者⼯具Chrome DevTools是Web前端开发性能调试的必备⼯具。
但是Chrome能做的远远不⽌这么简单,Chrome的功能通过成千上万的拓展⼯具进⾏拓展,让开发者们可以在开发过程中运⽤各种技巧测试⽹站和应⽤程序、尝试其他字体和布局,从⽽⼤⼤提⾼他们的⼯作效率。
下⾯我们就列出45个Chrome扩展器清单,供⼤家参考。
1.Page Ruler当前评分等级:4.5/5颗星Page Ruler 是⼀款可以测量Chrome浏览器中⽹页元素⼤⼩尺⼨的插件。
Page Ruler能在任何⼀个⽹页显⽰标尺,它可以为任何你想要测量的页⾯控件提供宽、⾼、位置(上、下、左、右)等信息,⽽且标尺的⼤⼩、位置可以很容易地通过拖动标尺边缘、改变靶⼼位置、或者在⼯具栏⼿动更新标尺⼤⼩和位置来进⾏精确调整。
Page Ruler同样提供了⼀个“组件模式”,它会在你⿏标移到组件上时显⽰该组件轮廓。
更棒的是,你可以浏览任何控件的⽗控件、⼦控件、同级控件。
只是它有⼀个⼩缺陷——在页⾯重新加载时它不能保存,如果改进了这个⼩缺陷,那它就更完美了。
2. Dimensions当前评分等级:4/5颗星Dimensions是另⼀个很好⽤的Chrome拓展程序,它⾮常适⽤于需要在⽹页上测量屏幕尺⼨和其它设计元素的⼈。
⽐如,Dimensions可以进⾏图⽚、输⼊框、按钮、视频、动图、⽂本和图标等元素间的测量。
⽽且这个拓展器是开源的,所以基本上你可以使⽤Dimensions看到任何关于浏览器中的区域边界。
作为前端开发⼯具,它能带来不可思议的⼯作体验——简洁、可靠、并有着完美的静态设计来测量和填充边距。
3. Tape当前评分等级:4.5/5颗星Tape 是⼀个⽤来测量像素值的⽹站设计⼯具,它能够智能地截取页⾯内容,并且可以⾮常⽅便的测量元素的位置和⼤⼩。
如何⽤chrome扩展将⽹页变成⿊底⽩字,⽤以保护视⼒不知道有没有科学依据,⾃⼰感觉⿊底⽩字对视⼒好些,于是动⼿加个chrome扩展:第⼀步:建个⽂件夹,名称⽐如叫changeColor;第⼆步:在changeColor⽂件夹中建三个⽂件:manifest.json 、 background.js 和 content_script.js第三步:编辑三个⽂件manifest.json放⼊以下代码{"name": "Page color","description": "Make the current page color","version": "2.0","permissions": ["activeTab"],"background": {"scripts": ["background.js"],"persistent": false},"browser_action": {"default_title": "change color"},"manifest_version": 2}background.js的代码// Copyright (c) 2011 The Chromium Authors. All rights reserved.// Use of this source code is governed by a BSD-style license that can be// found in the LICENSE file.// Called when the user clicks on the browser action.chrome.browserAction.onClicked.addListener(function(tab) {// No tabs or host permissions needed!console.log('Turning ' + tab.url + ' red!');chrome.tabs.executeScript(null, {file: "content_script.js"});});content_script.js代码document.body.style.backgroundColor="black";document.body.style.color="white";var myP = document.getElementsByTagName("p");for (var i=0;i<myP.length;i++){myP[i].style.backgroundColor = "black";myP[i].style.color = "white";};var myDiv = document.getElementsByTagName("div");for (var i=0;i<myDiv.length;i++){myDiv[i].style.backgroundColor = "black";myDiv[i].style.color = "white";};var myBlockquote = document.getElementsByTagName("blockquote");for (var i=0;i<myBlockquote.length;i++){myBlockquote[i].style.background = "grey";myBlockquote[i].style.color = "white";};var myA = document.getElementsByTagName("a");for (var i=0;i<myA.length;i++){myA[i].style.color = "white";};var myul = document.getElementsByTagName("ul");for (var i=0;i<myul.length;i++){myul[i].style.background = "black";myul[i].style.color = "white";};var myli = document.getElementsByTagName("li");for (var i=0;i<myli.length;i++){myli[i].style.background = "black";myli[i].style.color = "white";};var myspan = document.getElementsByTagName("span");for (var i=0;i<myspan.length;i++){myspan[i].style.background = "black";myspan[i].style.color = "white";};var mypre = document.getElementsByTagName("pre");for (var i=0;i<mypre.length;i++){mypre[i].style.background = "black";mypre[i].style.color = "white";};var mysection = document.getElementsByTagName("section");for (var i=0;i<mysection.length;i++){mysection[i].style.background = "black";mysection[i].style.color = "white";};var mytable = document.getElementsByTagName("table");for (var i=0;i<mytable.length;i++){mytable[i].style.background = "black";mytable[i].style.color = "white";};第四步打开chrome浏览器,在地址栏输⼊chrome://extensions 或者点最右边三个点-更多⼯具-扩展程序第五步钩选开发者模式,从资源管理器将changeColor⽂件夹拖放到扩展程序页⾯上或者点加载已解压的扩展程序也可。
multi-highlight-tool.crx 用法
multi-highlight-tool.crx 是一个浏览器扩展,主要用于在网页内容中高亮显示多个关键字。
以下是其用法:
1. 安装扩展:
首先,打开浏览器(如Google Chrome、Microsoft Edge等),点击菜单栏的扩展程序图标,然后选择“加载解压缩的扩展”。
2. 添加关键词:
在扩展程序的设置页面中,您可以添加多个关键字。
每个关键字之间用逗号分隔。
例如,如果您想在网页内容中高亮显示“关键字1”和“关键字2”,则添加如下内容:“关键字1,关键字2”。
3. 启用或禁用高亮功能:
在扩展程序的设置页面中,您可以选择是否启用高亮功能。
启用后,当您访问包含指定关键字的网页时,扩展会将这些关键字高亮显示。
4. 自定义高亮样式:
在扩展程序的设置页面中,您可以自定义高亮样式,如背景色、字体颜色等。
5. 清除缓存:
如果您想清除已高亮显示的关键字,可以在扩展程序的设置页面中点击“清除缓存”按钮。
请注意,由于浏览器扩展的安全性限制,您可能需要允许扩展程序运行在受限制的模式下。
在这种情况下,扩展程序可能无法在所有网页上正常工作。
您可以尝试在支持JavaScript的网页上启用高亮功能。
在使用过程中,如果您遇到任何问题,请参考扩展程序的文档或联系开发者寻求帮助。
祝您使用愉快!。
Installation for MacUser GuideBureau of Contract & Technical ServicesInformation Technology Division1) INSTRUCTIONS1. Click on the link below to access the “Google Chrome” page:https:///chrome/2. Click on the “Download Chrome for Mac” button.Figure 1-1: The “Download Chrome for Mac” button from the “Google Chrome” page.3. The Internet browser (Safari) will download the “Google Chrome” installer file. Once downloaded, the“Show downloads” button will be displayed from the top-right corner of the Safari browser. Click on the “Show downloads” button to view downloads.Figure 1-2: The “Show Downloads” button from the Safari browser.4. Open the downloaded file by double clicking on t he “googlechrome.dmg” file.Figure 1-3: The “Run” button.5. Drag and drop Chrome to the “Application s” folder.Figure 1-4: The “Google Chrome” pop-up window.6. The system will start copying “Google Chrome”to the “Applications” folder, and the following pop-upwindow will be displayed.Figure 1-5: Copying “Google Chrome” to “Applications” pop-up window.7. To launch the “Google Chrome” browser, hold the “command” key and press the space bar key from thekeyboard.8. T he “Spotlight Search” pop-up window will be displayed. Type “Chrome” in the “Spotlight Search” bar andpress the “return” key from the keyboard.Figure 1-6: The “Spotlight Search” pop-up window.9. Click on the “Google Chrome” option and press the “return” key from the keyboard.Figure 1-7: The “Google Chrome”icon from the “Spotlight Search” pop-up window.10. To la unch the “Google Chrome” browser, c lick on the “Open” button from the following pop-up window.Figure 1-8: The “Open” button.。
各种插件软件安装方法一、Chrome浏览器插件的安装方法1. 在Chrome浏览器中,点击右上角的菜单图标,选择“更多工具”。
2.在下拉菜单中选择“扩展程序”。
3. 在扩展程序页面的右上角,点击“打开Chrome网上应用商店”。
4.在应用商店中,可以通过框需要安装的插件。
5. 在结果中找到需要的插件后,点击“添加至Chrome”按钮。
6.在弹出的确认框中,点击“添加扩展程序”按钮。
二、Firefox浏览器插件的安装方法1. 在Firefox浏览器中,点击右上角的菜单图标,选择“附加组件”。
2.在附加组件页面的左侧菜单中,选择“扩展”。
3.在扩展页面的右上角,点击“发现更多附加组件”。
4. 在Add-ons页面的框中需要安装的插件。
5. 在结果中找到需要的插件后,点击“添加到Firefox”按钮。
6.弹出对话框询问是否添加插件,点击“添加”。
三、Visual Studio Code插件的安装方法2.在框中需要安装的插件。
3.在结果中找到需要的插件后,点击“安装”按钮。
四、WordPress插件的安装方法1. 在WordPress后台管理界面的左侧菜单中,选择“插件”>“安装插件”。
2.在安装插件页面的框中需要安装的插件。
3.在结果中找到需要的插件后,点击“现在安装”按钮。
2.点击左侧的“工具”>“插件”>“插件”。
3.在框中输入需要安装的插件名称。
4.在结果中找到需要的插件后,点击“添加”按钮。
六、Photoshop插件的安装方法1. 打开Photoshop软件,并点击顶部菜单中的“窗口”。
2.在下拉菜单中选择“扩展功能”。
3.在扩展功能面板中,点击右上角的设置图标。
4.在下拉菜单中选择“安装扩展功能”。
5.在弹出的文件浏览器中,找到需要安装的插件文件,点击“打开”。
6.插件开始安装,完成后会在扩展功能面板中显示插件。
七、Sublime Text插件的安装方法2.在下拉菜单中选择“命令面板”。
Chrome扩展开发指南(1)——入门这是制作chrome扩展插件的入门指南,不需要任何编程基础,看完这个后,我们就着手做自己的Chrome插件了。
好吧,我们现在就开始,其实我也是个新手。
准备工具做任何事情都要有个工具,制作chrome插件需要的工具很少。
∙记事本,用来编写代码∙Chrome浏览器,这个不能少吧。
Windows下,所有版本的Chrome都可以制作插件。
Linux 下需要下载Beta版本,Mac下载dev版本。
开始制作第一个插件∙在计算机中创建一个目录来存放插件代码。
∙在目录里面创建文件manifest.json(注意后缀名是.json),用记事本打开,写入如下代码1{1"name": "第一个Chrome插件",1"version": "1.0",1"description": "我的第一个Chrome插件,还不错吧",1"browser_action": {1"default_icon": "icon.gif"1}1}复制代码∙把下面两张图片保存到文件夹中,分别取名icon.gif和smile.gif图片一:图片二:∙安装这个插件:a.点击右上角扳手,选择扩展程序,打开扩展中心。
b.点击右上角的“开发人员模式”,使得前面的“+”变成“-”,打开相应的菜单。
如果一开始就是“-”,那么不用点击。
c.点击“载入正在开发的扩展程序按钮”,导入刚才创建的文件夹。
如果一切顺利,你的Chrome地址栏将会有个新图标,你的第一个插件诞生了。
给第一个插件增加新功能你现在虽然做了第一个插件,但实际上他并没有实现任何功能,我们点击图标,没有任何反应。
下面我们就给他增加点功能。
∙编辑manifest.json这个文件,用下面的代码替换现有的代码,其实我们只是加了一行代码和一个逗号而已。
1{1"name": "第一个Chrome插件",1"version": "1.0",1"description": "我的第一个Chrome插件,还不错吧",1"browser_action": {1"default_icon": "icon.gif",1"popup": "popup.html"1}1}复制代码∙下面我们创建一个文本文件popup.html,用记事本打开,将下面的代码写进去1<p>Hello,Chrome!</p>1<p>我的名字叫ChromeChina!</p>1<p><a href="" target="_blank">Chrome中文论坛欢迎你</a>1<p><img src="smile.gif" /></p>复制代码∙回到Chrome的扩展中心,点击插件下的“重新载入”。
现在点击插件图标看看。
我们的第一个插件算是制作成功了。
打包插件我们想把自己制作的插件给其他人用,那么就需要将插件打包。
∙回到Chrome的插件扩展中心,点击“打包扩展程序”按钮。
∙选择刚才创建的文件夹,点击确定生成后缀为crx和cpm文件各一个。
把crx文件发送给自己的朋友,告诉他们你也会制作chrome插件吧。
你可以修改里面的文字图片,制作出极具个性的扩展来了。
现在让我们来看看大家都做出了什么样的扩展,把你的第一个扩展上传上来让大家看看吧!这个是我的:Chrome扩展开发指南(2)——概述这篇文章翻译自/chrome/extensions/overview.html,我还没有真正做过插件,翻译这篇文章算是班门弄斧,有翻译的不好的地方请一定指出来,希望能够达到完美!( 对新手说的话:文章涉及到的一些术语,对没有任何网页知识的新手来说还是挺难懂的,可以借助Google/baidu看一下,其实不懂也没多大关系,这篇文章只是一个概述,完全可以跳过这些术语,希望大家对制作插件不要失去信心。
)只要看完这篇文章,并且做过入门指南中的例子,你就可以真正开始开发属于自己的Chrome 插件了。
基础知识一个Chrome扩展是由HTML、CSS、JavaScript、图片等文件压缩而成。
扩展实际上就是一个web页面,你可以用任何浏览器提供给web页面的接口,从XMLHttpRequest 到JSON ,再到HTML本地缓存都可以使用。
Chrome扩展能做什么呢?我们肯定使用过一些扩展,会发现有些扩展在Chrome地址栏右侧区域增加一个图标。
还有些扩展能够和浏览器的一些元素(如书签、tab导航标签)交互。
扩展还可以和web页面交互,甚至是从web服务器获取数据。
更加详细的内容可以从Developer's Guide看到。
Chrome扩展的组成文件每个扩展由下列文件组成:∙一个manifest文件(主文件,json格式)∙至少一个HTML文件(主题可以没有HTML文件)∙JavaScript文件(可选,非必须)∙任何其他你需要的文件(比如图片)当你开发一个扩展的时候,需要把这些文件放在一个文件夹里,当你发布这个扩展的时候,这个文件夹下的所有文件将会打包成一个特殊后缀.crx的ZIP文件。
引用文件你可以放置任何文件到你的扩展里面,但是怎么调用这些文件呢?一般来说,使用相对地址调用,类似HTML中调用文件。
下面是个例子,在子文件夹images中有个图片myimage.png,我们可以这样调用它1<img src="images/myimage.png">复制代码其中images/myimage.png表示这个文件。
也许你注意到当使用Google Chrome debugger查看这些文件的时候给,每个文件的地址是下面这种格式2chrome-extension://<extensionID>/<pathToFile>复制代码这个地址中,<extensionID>是你制作的扩展的唯一标示符,也就是扩展的身份证编号。
<pathToFile>是文件相对扩展顶级文件夹得位置。
manifest文件主文件取名manifest.json,用来描述这个扩展,包括扩展名字、版本、调用的文件、可用域等信息。
下面是个典型的manifest文件,这个扩展可以调用的内容。
3{4"name": "My Extension",5"version": "2.1",6"description": "Gets information from Google.",7"icons": { "128": "icon_128.png" },8"background_page": "bg.html",9"permissions": ["http://*/", "https://*/"],10"browser_action": {11"default_title": "",12"default_icon": "icon_19.png",13"popup": "popup.html"14}15}复制代码扩展结构组成结构绝大部分扩展有background文件,一个不可见的文件控制着整个扩展的运行。
上面这个图片显示的浏览器至少安装了两个扩展:一个浏览器行为扩展(黄色的图标),页面行为扩展(蓝色的图标)。
这个浏览器行为扩展的background文件是用一个HTML文件定义的(background.html),这个background文件中有JavaScript代码控制整个浏览器的活动。
HTML页面background不是唯一存在的HTML文件,比如浏览器行为可能是弹出一个小窗口,这个小窗口的内容就可以调用一个HTML文件。
Chrome扩展也能够用chrome.tabs.create() orwindow.open()这种函数来显示HTML文件。
扩展里面的HTML文件可以互相访问对方的DOM结构,可以引用其他文件中定义的函数。
下面的图展示了浏览器弹出一个窗口这个功能的结构(这正是我们最开始的例子)。
这个弹出窗口的内容是一个HTML的web文件,这个弹出窗口不需要包含background文件中的代码,因为,popup.html和background是可以互相访问的。
内容脚本(Content scripts)如果你插件需要和网页交互,那么他就需要一个内容脚本(Content scripts),内容脚本常由JavaScript编写,会在网页载入完成后调用。
完全可以把内容脚本看做是网页的一部分,而不是扩展的一部分。
内容脚本可以访问到当前浏览器浏览的页面,而且还可以改变网页的显示方式(油猴脚本就是内容脚本)。
下面的图片中,内容脚本可以读取、更改网页的DOM。
注意,他不能更改background.html 中的内容。
内容脚本也不是和父扩展完全隔离开来,他也可以和父级扩展交换信息。
如下图中所示,内容脚本在发现一个RSS Feed地址后将会给background.html发送一个信息。
或者background.html给内容脚本发送一个信息要求改变网页外观。
不同页面间的交互一个扩展中的文件常常需要交互。
由于扩展的所有文件都由同一个进程执行,网页能够直接给其他页面发送命令。
可以使用类似chrome.extension methods such as getViews() and getBackgroundPage()这样的方法引用扩展中的方法。
一旦页面中引用了另外的页面,第一个页面就可以调用其他页面的函数,甚至可以控制DOM。
结束语好了,你已经大概了解了一个扩展程序的基本内容,可以开始写作自己的扩展了。