Chrome扩展开发指南(5)——Override Pages(重置页面)

最新推荐文章于 2024-04-21 13:36:02 发布
最新推荐文章于 2024-04-21 13:36:02 发布
阅读量2k 收藏
点赞数
文章标签： chrome 扩展 extension javascript url google

Chrome扩展开发指南(5)——Override Pages(重置页面)

重置是一种用自己提供的页面替换Google Chrome默认页面的方法。一个重置页面常常是用HTML、JavaScript、CSS组成。

当前，能够替换的页面只有新标新标签页，新标签页就是我们打开一个新标签时出现的页面。

我们可以把默认的新标签页：

ntp-default.png


替换成这种样式：

ntp-blank.png


重置页面非常简单，只需在Manifest中定义自己的页面地址。比如下面的例子中，我们使用了newtab.html来重定义新标签页。

  1. {
  2.   "name": "My extension",
  3.   ...
  4.   "chrome_url_overrides": {
  5.     "newtab": "newtab.html"
  6.   },
  7.   ...
  8. }
复制代码


几点注意事项

为了让你定义的新标签页看起来不错，请遵循下面几点建议：

  • 保持页面简洁，使得能够快速加载
    由于新标签页经常出现，外观就显得特别重要。比如我们要避免从远程调用数据，或者读取数据库资源。
  • 确保有<title>标签
    如果没有<title>，大家讲会看到页面的URL，这会让人很迷惑，我们应该包含这样一句 <title>New Tab's Name</title>
  • 不要让键盘焦点在页面上
    我们应该让用户新建标签页的时候键盘焦点在地址栏上。
  • 不要模仿默认的新标签页面
    创建默认标签页的API（比如最近关闭的标签、最常访问的网站等等）不存在！你必须做出一些完全不同的东西。

例子

这儿examples/api/override有一些重置新标签页的例子。

其中有个我们至学习以来碰到的最简单的例子，把新标签页面换成空白页面

新建manifest.json文件：

  1. {
  2.   "name": "空白的新标签页",
  3.   "version": "0.1",
  4.   "chrome_url_overrides": {
  5.     "newtab": "blank.html"
  6.   }
  7. }
复制代码

新建文件blank.html作为默认标签页，我们可以只写这样一句话：

  1. <title>新标签页</title>
复制代码

好的，看看效果吧，就这么简单，你现在就可以动手DIY了。

杠杠PP
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebOverride, Chrome 扩展，让我们可以自定义网站 ！.zip
09-18
WebOverride, Chrome 扩展，让我们可以自定义网站 ！ WebOverrideWebOverride让我们把代码段插入任何网站，让你自定义它以满足你的需要自动登录隐藏烦人内容创建自定义快捷键等等。它做什么？使用 WebOverride，你可以将 HTML 。CSS和JavaSc
chrome扩展开发介绍和右键开发
superKM的博客
12-17 1543
chrome扩展开发 chrome扩展中文文档官网 Chrome浏览器在全球都拥有可观的忠实用户，抛去其占据了浏览器市场的霸主地位不说，其具备了众多的优点，如良好的用户体验，简单的开发规范等等。 归纳为以下几点： 市场占有率高，用户基础庞大； 开发流程简单，方便快速上手； 应用场景广泛，兼容webkit内核（360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等）； 可扩展性强，非weikit内核的浏览器也有一定的支持（如Firefox） 初试插件 首先创建一个文件夹，用于存储插件相关资源
从浏览器原理出发聊聊Chrome插件
阿里云云栖号
12-06 1233
本文从浏览器架构演进、插件运行机制、插件基本介绍和一些常见的插件实现思路几个方向聊聊Chrome插件。
Chrome插件开发入门
m0_67400973的博客
08-01 3594
content_scripts是在web页面运行的JavaScript脚本，通过使用标准的DOM，它可以获取浏览器访问页面的详细信息，并可以修改这些信息。1、获取DOM元素2、修改DOM元素3、修改样式1、不能使用除了chrome.extension之外的chrome.*接口2、不能访问它所在扩展中定义的函数和变量3、不能访问web页面和其他content_scripts中定义的函数和变量4、不能做cross_siteXMLHttpRsquest。...
Chromium源码（基于103版本） 实现内置扩展
u010843299的博客
10-19 123
在src\chrome\browser\resources\myapi文件夹下，其中manifest.json文件的“key”的来源：通过载入一个自定义的crx插件然后在chromium的appdata下找到该插件的key，该key可能被用于计算extension-id，如果扩展无法调用接口，有可能是key不对，在src\base\base64.cc的Base64Decode函数处做检查。使用*.json添加扩展API，可以参考top_site.json的实现。
Chrome 扩展基础知识
awj321000的专栏
01-16 774
360 的文档 http://open.chrome.360.cn/extension_dev/overview.html 官方文档 https://developer.chrome.com/extensions/getstarted 看了好多回答，基本上都是推荐的教程，然而 Google 的官方教程得翻墙才能看，360 的文档又太老，刚好最近兴趣来了想学习写 Chrome
打开新世界大门，测试人可以用Chrome插件干什么？
主要分享测试的学习资源，帮助快速了解测试行业，帮助想转行、进阶、小白成长为高级测试工程师。
12-21 1170
这篇文章所说的Chrome插件，也就是我们通常说的Chrome扩展 (Chrome Extension)，是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由 HTML、CSS、JS、图片等资源组成的一个 .crx 后缀的压缩包。让我们来看看官方解释：Chrome Extension 是一个小的软件程序，它可以用来定义浏览器的浏览体验，让用户可以根据个人需求或者偏好定制 Chrome 浏览器的功能和行为，主要使用的技术栈是 HTML、Javascript 和 CSS。
Chrome插件(扩展)开发全攻略
justdoshare的博客
12-02 874
写在前面 我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo，写博客的辛苦大家懂的，所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面：GitHub - sxei/chrome-plugin-demo: 《Chrome插件开发全攻略》配套完整Demo，欢迎clone体验，大家可以直接下载下来运行。 另外，本文图片较多，且图片服务器带宽有限，右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发，所以请耐心等待加载完毕。 本文目录： demo部分截图： .
【chrome插件开发二】chrome常用语法汇总
weixin_46249441的博客
03-03 1855
💓 在上一节我们手写了第一个chrome插件，手写第一个chrome插件！接下来我们来看chrome插件零基础入门专栏的第二篇文章，chrome常用语法汇总： 目录 2️⃣ storage用法 🎈popup.html 3️⃣ options配置的用法 4️⃣ 消息通知 notifications 5️⃣ contextMenus 6️⃣ badge 徽章 7️⃣ pageAction 8️⃣ chrome_url_overrides 9️⃣ content_scripts 🎈con..
Chrome Response Override-crx插件
03-24
＃chrome-response-override Chrome devtools扩展程序可即时修改响应，无需安装外部应用程序。 使用简单的“查找和替换”步骤提供支持以覆盖API / HTML / *响应。 无需安装外部应用程序。 在Chrome扩展程序中覆盖...
request-override:Google Chrome扩展程序，用于将api调用从开发重定向到生产
04-28
#Request Override ##安装说明必需： Chrome合金 :expressionless_face: 安装依赖项： npm install bower install 从grunt debug的.\app目录加载扩展名并运行grunt debug
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
11-26
也可参看 Override Pages，来创建一个可定制的书签管理器页面。 1.1、manifest.json 中配置 { "name": "My extension", ... "permissions": [ "bookmarks" ], ... } 对象和属性： 签是按照树状结构组织的，...
chrome-response-override:Chrome devtools扩展程序可即时修改响应，无需安装外部应用
05-05
Chrome devtools扩展程序可即时修改响应，无需安装外部应用程序。 使用简单的“查找和替换”步骤提供支持以覆盖API / HTML / *响应。 无需安装外部应用程序。 在Chrome扩展程序中覆盖响应正文的步骤 打开devtools...
Linux:进程控制
m0_61088872的博客
04-20 1029
WNOHANG: 若 pid 指定的子进程没有结束，则 waitpid() 函数返回 0 ，不予以等待。然后 shell 读取新的一行输入,建立一个新的进程,在这个进程中运行程序 并等待这个进程束。options==WNOHANG，非阻塞等待：对子进程进行检测，子进程没退出，直接返回0。参数： status 定义了进程的终止状态，父进程通过 wait 来获取该值。参数：status 定义了进程的终止状态，父进程通过wait来获取该值。当正常返回的时候 waitpid 返回收集到的子进程的进程 ID；
Chrome修改主题颜色
海天鹰
04-17 387
注意：自定义Chrome按钮只在搜索引擎为Google的时候出现。
浏览器工作原理与实践--浏览上下文组：如何计算Chrome中渲染进程的个数
echohuangshihuxue的博客
04-18 972
好了，本节的内容就介绍到这里，下面我来总结下本文的主要内容：首先我们使用了两种不同的方式打开两个标签页，第一种是从A标签页中通过链接打开了B标签页，第二种是分别打开A和B标签页，这两种情况下的A和B都属于同一站点。通过Chrome的任务管理器我们发现，虽然A标签页和B标签页都属于同一站点，不过通过第一种方式打开的A标签页和B标签页会共用同一个渲染进程，而通过第二种方式打开的两个标签页却分别使用了两个不同的渲染进程。
Linux--环境变量
最新发布
2301_76618602的博客
04-21 647
当我们运行这个可执行程序的时候，就变成了进程，该进程的父进程就是Bash，Bash会构建命令行参数表，和命令行参数的个数传给main函数；如果我们也想让我们自己的程序执行的时候不需要加命令，我们可以将自己程序拷贝到上面的路径中去。我们发现，其实我们平时用的指令后面一般都会跟选项，为什么我们的指令可以有不同的选项，我们的选项跟不同的功能，这是因为指令和选项会传给它main函数中，对应的argc，argv来完成不同的功能，定义变量的本质，其实是开辟空间，在运行的期间我们的程序也能开辟空间。
Android开发实战——登录注册页面（附源码）
06-08
很高兴为您解答关于Android开发的问题。以下是登录注册页面的示例代码： 1. activity_login.xml ``` <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="16dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Login" android:textSize="28sp" android:textColor="@android:color/black" android:layout_gravity="center_horizontal"/> <EditText android:id="@+id/et_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:hint="Email"/> <EditText android:id="@+id/et_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Password" android:inputType="textPassword"/> <Button android:id="@+id/btn_login" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:text="Login"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:text="Don't have an account?" android:textColor="@android:color/black"/> <TextView android:id="@+id/tv_register" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Register" android:textColor="@android:color/holo_blue_light"/> </LinearLayout> ``` 2. activity_register.xml ``` <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="16dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Register" android:textSize="28sp" android:textColor="@android:color/black" android:layout_gravity="center_horizontal"/> <EditText android:id="@+id/et_fullname" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:hint="Full Name"/> <EditText android:id="@+id/et_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Email"/> <EditText android:id="@+id/et_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Password" android:inputType="textPassword"/> <Button android:id="@+id/btn_register" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:text="Register"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:text="Already have an account?" android:textColor="@android:color/black"/> <TextView android:id="@+id/tv_login" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Login" android:textColor="@android:color/holo_blue_light"/> </LinearLayout> ``` 3. LoginActivity.java ``` public class LoginActivity extends AppCompatActivity { private EditText etEmail, etPassword; private Button btnLogin; private TextView tvRegister; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); etEmail = findViewById(R.id.et_email); etPassword = findViewById(R.id.et_password); btnLogin = findViewById(R.id.btn_login); tvRegister = findViewById(R.id.tv_register); btnLogin.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // Perform login logic } }); tvRegister.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(LoginActivity.this, RegisterActivity.class); startActivity(intent); } }); } } ``` 4. RegisterActivity.java ``` public class RegisterActivity extends AppCompatActivity { private EditText etFullname, etEmail, etPassword; private Button btnRegister; private TextView tvLogin; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_register); etFullname = findViewById(R.id.et_fullname); etEmail = findViewById(R.id.et_email); etPassword = findViewById(R.id.et_password); btnRegister = findViewById(R.id.btn_register); tvLogin = findViewById(R.id.tv_login); btnRegister.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // Perform registration logic } }); tvLogin.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(RegisterActivity.this, LoginActivity.class); startActivity(intent); } }); } } ``` 这个示例代码可以作为一个基础框架供您的开发使用。当然，您需要根据您的具体要求对代码进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值