`

chrome extensions范围

阅读更多
chrome的扩展(extensions),和插件(plugins)相比,能做的事情是比较有限的

基本上可以做2类事情:

1、与原始页面的内容交互,比如获取DOM里的内容,注入javascript脚本执行等
2、与浏览器交互,比如操作chrome的windows、tabs,访问chrome的书签、历史记录等

做相应的操作,需要在manifest文件里声明权限,在用户安装的时候,会提示用户,由用户决定是否允许(跟android app是一个意思)

范围基本局限在上述2点,像访问本地硬盘、调用本地应用等,还是不支持的。如果要做本地应用的一些事情,用extension是做不到的,必须用plugin,基于NPAPI

扩展主要有以下几种形式:

1、browser action或page action

这种形式的扩展会在chrome地址栏(omnibox)那里增加一个按钮,允许用户点击

然后可以弹出一个popup窗口,在popup html里引用的javascript,操作的就是popup的DOM,而不是原始页面的DOM
function click(e) {
  chrome.tabs.executeScript(null,
      {code:"document.body.style.backgroundColor='" + e.target.id + "'"});
  window.close();
}

document.addEventListener('DOMContentLoaded', function () {
  var divs = document.querySelectorAll('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', click);
  }
});

如上述的代码,document、window,都是popup里面的DOM元素,而不是原始页面里的元素

2、background javascript

也可以不设置action按钮,通过background加载长期后台运行的javascript脚本,做一些操作,比如在后台运行一个定时任务等

3、content script

扩展还可以定义一系列content script脚本,注入到原始页面里执行

content script是在一个特殊环境中运行的,这个环境叫做isolated world(隔离环境)。它们可以访问所注入页面的DOM,但是不能访问里面的任何javascript变量和函数。对每个content script来说,就像除了它自己之外再没有其它脚本在运行;反过来也是成立的:页面里的javascript也不能访问content script中的任何变量和函数

隔离环境使得content script可以修改它的javascript环境而不必担心会与这个页面上的其它content script冲突。例如,一个content script可以包含jquery v1,而页面可以包含jquery v2,它们之间不会产生冲突

另一个重要的优点是隔离环境可以将页面上的脚本与扩展中的脚本完全隔离开。这使得开发者可以在content script中提供更多的功能,而不让web页面利用它们

尽管content script的执行环境与所在的页面是隔离的,但它们还是共享了页面的DOM。如果页面需要与content script通信(或者通过content script与extension通信),就必须通过这个共享的DOM

关于chrome extensions的概述,没有比官方overview更好的文章:
英文版:http://developer.chrome.com/extensions/overview.html
360翻译中文版:http://open.chrome.360.cn/extension_dev/overview.html
分享到:
评论

相关推荐

    chrome-extensions:镀Chrome扩展组

    "chrome-extensions:镀Chrome扩展组"可能是某个关于开发Chrome扩展的项目或者教程集合,由于提供的信息有限,我们将主要探讨Chrome扩展的一般概念、核心技术和开发流程。 Chrome扩展基于Web技术,如HTML、CSS和...

    chrome扩展程序开发/chrome运行本地JS脚本

    使用Chrome的开发者工具(DevTools)中的“Extensions”面板可以方便地安装、更新和调试扩展。还可以通过`chrome.runtime.reload()`手动刷新扩展。 总之,开发Chrome扩展并运行本地JS脚本是一种强大的方式来定制...

    网页内容批量替换工具

    在界面上,用户可以直观地输入要查找和替换的文本,设置搜索范围,以及选择处理的文件类型(如HTML、CSS、JavaScript等)。此外,可能还包含高级选项,如正则表达式支持,使替换更具有灵活性和精确性。 "说明_...

    Chrome_Clean_cache

    2. 打开Chrome浏览器,确保地址栏显示的是“chrome://extensions/”页面。 3. 拖动"clear-Cachev1.0.2.crx"文件到扩展页面,浏览器会询问是否添加扩展,点击“添加扩展”即可。 安装完成后,"Chrome_Clean_cache...

    Chrome插件分享-Stylus安装包

    需要打开Chrome浏览器的扩展程序页面(`chrome://extensions`),然后启用“开发者模式”(右上角的开关)。 3. **加载未打包扩展程序**:点击页面上的“加载已解压的扩展程序”按钮,选择你刚刚解压的Stylus文件夹...

    chrome TV 扩展

    然后,用户需要打开Chrome的扩展管理页面(chrome://extensions/),在开发者模式下,将下载的`.crx`文件拖放到页面上,系统会提示安装。安装完成后,重启Chrome浏览器,扩展即生效,用户可以在新的浏览器标签页中...

    Chrome 扩展-及应 用开发

    2. 开发工具:开发Chrome扩展需要使用Chrome浏览器提供的开发者工具,开发者可以在浏览器的扩展管理页面(chrome://extensions/)中开启开发者模式,然后加载已解压的扩展进行调试。 3. 权限管理:Chrome扩展开发中...

    油猴插件(Chrome浏览器用)

    1. 安装:首先,访问Chrome浏览器的扩展程序页面(chrome://extensions/),开启“开发者模式”,然后将Tampermonkey.crx文件拖拽到页面上进行安装。 2. 添加脚本:在安装完成后,打开油猴插件的管理界面,点击“+...

    es-sql-site-chrome.zip

    2. **加载到Chrome**:进入Chrome的扩展程序管理页面(chrome://extensions/),开启开发者模式,点击“加载已解压的扩展程序”,选择解压后的文件夹进行加载。 3. **配置连接**:加载成功后,插件将在Chrome的右上...

    screentime:Chrome扩展程序,用于跟踪和管理您在社交媒体平台和网站上的时间

    检测时间 chrome扩展程序,用于在分散注意力的网站上跟踪和管理您的时间。...在Chrome浏览器上转到chrome://extensions 。 单击Load unpacked并选择dist文件夹 打包的扩展程序可以在安装 屏幕截图

    github-repo-size::rocket:Chrome扩展程序可在GitHub上显示存储库大小

    :rocket: Chrome扩展程序可在... localStorage.removeItem('x-github-token')发展历程克隆此仓库转到chrome扩展程序chrome:// extensions 启用开发者模式点击加载解压扩展程序,然后选择此克隆存储库执照麻省理工学院

    基于Python开发chrome插件的方法分析

    这一设置可以在chrome://extensions/页面中找到。在启用开发者模式之后,可以通过选择“加载未打包的扩展程序”来加载开发者自己创建的扩展目录。完成这些步骤之后,用户的Chrome浏览器就能够运行Python代码了。 在...

    ganalytics-lastDay:一个 chrome 扩展,可以在谷歌分析的范围内自动设置今天的日期

    在 Chrome/Chromium 中打开 chrome://extensions 页面 拖放(您也可以在不克隆整个 repo 的情况下下载该文件:只需获取) 确认添加扩展 打开扩展程序:您可以通过单击书签栏中的 Chrome 的“应用程序”链接或导航到...

    Extensions Update Notifier-crx插件

    这款插件是英文版,适用于全球范围内的Chrome用户,尤其是那些希望保持其浏览器扩展程序始终处于最新状态的用户。 在IT领域,浏览器插件是一种增强或扩展浏览器功能的小型软件应用程序。CRX是Chrome扩展的打包格式...

    pixdom:像素测量Chromium扩展

    Go to chrome://extensions Enable developer mode Click ' Load Unpacked ' Select ./dist folder 用法 单击PixDOM扩展图标以启用扩展 鼠标左键选择一个元素 鼠标左键拖动以选择范围内的元素 右键单击以取消选择...

    playctrl:通过全局快捷方式在 Chrome 中控制 Google Play

    播放控制注意:从 Chrome 39 开始,您可能不需要 playctrl,因为 Chome 具有“全局范围”快捷方式! 安装并通过单击扩展程序页面底部的“键盘快捷键”(chrome://extensions)更改您喜欢的快捷键。 有关更多信息,请...

    Natlex Jira Extensions-crx插件

    值得注意的是,由于提供的信息中只包含了一个名为“Natlex_Jira_Extensions.crx”的文件,这表明该插件是以Chrome浏览器扩展的形式存在的。这意味着用户需要在Google Chrome浏览器中安装和使用该插件,以充分利用其...

    StarManager:Chrome浏览器中的Github小明星管理器

    进入 chrome://extensions/shortcuts 为 Star Manager 设置 popup 的快捷键 打开 插件的设置界面(chrome-extension://klajgkhhnnipjkilfgkkjofidahjfobh/options.html),输入用户名和 Github Access Token,提交修改...

    ChromeProxy:可轻松切换代理设置的 Chrome 扩展程序

    否则,为项目创建一个本地存储库,然后导航到 chrome://extensions,在开发模式标题下,单击“加载解压缩的扩展...”。 导航并选择下载的文件夹。 选项 选项页面将让您配置切换的值和范围。 对于离线应用程序的开发...

    brancher:Chrome扩展程序可在BitRise上自动完成分支名称

    导航至chrome://extensions/ ,然后按“加载解压缩” 选择下载的文件夹,它应该显示在您的扩展名列表中。 通过网上商店 仓库访问 公共仓库 无需在这里做任何事情-只需将扩展程序添加到Chrome中,您就可以开始了。 ...

Global site tag (gtag.js) - Google Analytics