google-chrome-extension - Chrome 扩展 : How to create?-6ren

google-chrome-extension - Chrome 扩展 : How to create?

转载作者：行者123 更新时间：2023-12-04 00:00:43

24

4

关闭。这个问题需要更多 focused .它目前不接受答案。

想改进这个问题？更新问题，使其仅关注一个问题 editing this post .

3年前关闭。

Improve this question

我在 HTML 和 JavaScript 方面经验丰富，但从未制作过(真正的)Chrome 扩展程序(“Hello World”教程除外)。

我想做的是做一个扩展来增加查看图像的功能。基本上，当您转到 .jpg、.png 等文件时，我希望加载一段 JavaScript。页。

我无法从“Hello World”教程或文档中获得太多信息，并且我查看了 XML Tree 中的代码，但我无法理解它。

我不知道从这里去哪里。

最佳答案

既然您在 JavaScript 和 HTML 方面经验丰富，请告诉您最好的来源是什么？

http://developer.chrome.com/extensions/getstarted.html

文档

上面的链接(Chrome 扩展文档)一旦掌握了它就很容易阅读。比如我不知道 JavaScript 当我创建我的第一个 Chrome 扩展程序(重新加载所有选项卡)时。我建议您阅读文档(只需一个小时)，然后按照您需要的步骤进行操作。

确保您了解可以点击的不同 UI

Browser Actions :您使用浏览器操作将图标放在主 Chrome 工具栏中。

Context Menus :您使用上下文菜单将项目添加到 Chrome 上下文菜单。

Desktop Notifications :使用桌面通知通知用户某事很重要。

Option Pages :如果你想要一个选项页面，这就是你的人!

Page Actions : 如果你想覆盖某些页面(新标签、历史、书签管理器)

确保您意识到可以利用许多浏览器交互:

Bookmarks : 访问您的书签

Cookies : 访问 Cookie

History : 访问历史

Management : 访问扩展管理

Tabs : 访问您的标签

Windows :访问您的 Windows(具有选项卡)。

确保您了解 Background Pages 之间的区别和 Content Scripts ，以及它们的局限性。

确保您意识到 Chrome.* API 中有一些简洁的功能。 .

确保您了解 permissions .

更多

我在 Stackoverflow 上回答的 145 个 Chrome 问题

如果你想要更多的例子，我已经回答了 many有关可能帮助您入门的 Chrome 扩展程序的问题(已回答 145 多个问题)，例如，以下是一些较新的问题:

Content Script Skeleton

Send data from Background Page to Content Script

Communication with the embedding page , Simple fetching of the pages JS variable

Taking Screenshots in Chrome

Walkthrough building an extension

Executing JavaScript when a user clicks on a browser action.

How to capture selected text and send it to a web service

Walkthrough how to create an extension to access Disqus Comment Box

Walkthrough how to highlight the DIV that the mouse if hovering over

Walkthrough how to move to the top of the page extension

Walkthrough how to create a bubble overlay when you select text.

等和120 more answers对于 Chrome 扩展，以上是我从第一页的结果中复制的内容。所以在谷歌搜索会得到很多结果。

我创建的真正的开源扩展

如果您想查看我编写的扩展的真实源代码(有些 super 小，有些 super 大):

Reload all tabs extension

Open link in a foreground tab extension

HTML5 Haptics Chrome extension

Set Wallpaper extension

Prayer times extension

Facebook friend exporter extension

Proxy Anywhere extension

资源

如果您仍然想要更多资源，您可以:

阅读 documentation .

阅读 Official Chromium Extension Mailing list

irc.freenode.net 上的非官方 Internet 中继聊天室 #chromium-extensions

谷歌(将带你到 Stackoverflow 或 Quora)

我希望这有帮助!

关于google-chrome-extension - Chrome 扩展 : How to create?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4725896/

24

4

0

文章推荐： visual-studio - Java IDE 与 Microsoft IDE

文章推荐： r - R中的组内操作(不是滚动总和)

文章推荐： PHPExcel会计格式

c# - : test-create, try-create、create-catch 哪种设计最可取？
假设有一个创建用户的操作。如果存在指定的电子邮件或用户名，此操作可能会失败。如果它失败了，则需要确切地知道原因。在我看来，有三种方法可以做到这一点，我想知道是否有明显的赢家。所以，这是一个类用户:
javascript - Object.create 与 Object.create() 与 Object.create(null)
var obj1 = Object.create; console.log(typeof obj1); var obj2 = Object.create(null); console.log(type
getting this error after building the ts files yield User.create({ ^ TypeError: Cannot read properties of undefined (reading 'create')(在生成ts文件后获得此错误将产生User.create({^TypeError：无法读取未定义的属性(正在读取‘Create’)))
I am getting this error after running npm run build yield User.create({^在运行NPM Run Build Year Use
javascript - Object.create(Object.prototype) , Object.create(Object) 和 Object.create(null) 之间的区别
我应该为其他人将从中继承的第一个父对象传递哪个参数，哪个参数更有效 Object.create(Object.prototype) Object.create(Object) Object.creat
sql-server - SQL Server : Syntax near keyword 'CREATE' when batch executing CREATE SCHEMA and CREATE TABLE
我正在尝试使用 JDBC(最新版本)设置 SQL Server 2008 数据库。我有一个我想一起执行的 setup sql 命令列表: 基本上我做的是: connection.setAutoCom
amazon-web-services - AWS : create json template to create auto scaling group to create 2 EC2 instances
我正在尝试创建一个 CloudFormation 模板来创建一个 Auto Scaling 组，以便我可以从中启动 2 个实例。我已经创建了 Auto Scaling 组，但我不知道如何编写用于从
While creating loop carousel with elementor pro, "create a template" button does not allow me to create a template(当用elementor Pro创建循环旋转木马时，“创建模板”按钮不允许我创建模板)
我正在创建我的第一个WordPress网站。我已经在我的网站上安装了Elementor Pro插件。随之而来的一个有利因素是“循环旋转木马”。。。当我把它添加到我的页面时，一切似乎都在工作，但是当我点
create-react-app - create-react-app中的ENOSPC错误
create-react-app error 我从终端运行yarn start时收到此错误消息...我尝试了sudo killall node和许多其他过程来清除i-node却没有成功。我也将我的c
workflow - "Created On"和 "Record Created On"之间的区别
在 CRM 中，当我尝试设置工作流程时，我可以选择与某个实体的创建时间相关的超时。涉及三个字段。记录创建于创建于修改时间虽然最后一个很明显，但我看不出其他两个之间有任何逻辑上的区别。最佳答案
create-react-app - create-react-app创建的package.json中browserslist的意义是什么
我在一次采访中被问到这个问题。我无法回答。 "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] 我可以
ruby-on-rails - Rails .create() 与 controller#create
这是一个 Rails 新手问题: 当我在模型上调用 create() 时，它会绕过关联的 Controller create 操作吗？例如，这没有命中我的标签 Controller #create
oracle - CREATE TABLE 和 CREATE ANY TABLE 权限的区别
我不明白这两种特权之间的区别。我找到了这两种解释，但对我没有帮助。 CREATE TABLE -> Enables a user to create a table owned by that us
Sharepoint 工作流创建任务属性 : when to create fields and when to create depepndency properties?
我是 SharePoint 工作流的新手。创建新任务并分配 TaskId 时，我有两个选项: 创建一个新字段来保存 TaskId 创建一个新属性来保存 TaskId。新属性是一个依赖属性。我的问
delphi - TDataModule 后代 'created' 没有 .Create 但没有问题？
我突然注意到我们的代码库中有一个TDataModuleTestExchange(nil)“构造函数调用”: procedure TDialoogConfigExchange.ButtonTestCli
delphi - 我可以使用 .Create(Nil) 而不是 .Create(Application)
我有一个具有 TComponent 变量的单元，我在单元初始化时创建此组件，如下所示: var XComp: TComponent; . . . . initialization begin
php - Composer : Updating a Project Created with `create-project`
Composer 是否提供了更新项目创建时使用的包的方法？即，如果我使用以下内容创建一个新的 Laravel 项目 composer create-project --prefer-dist lara
java - hbm2ddl.auto= create/create-drop 也会删除数据吗？
在 Hibernate 中，如果我们将 hbm2ddl.auto 设置为 create/create-drop ，那么它将在启动时删除旧模式并创建新模式。这意味着，它也会删除数据？..我的疑问是，如果
Dockerhub Create Automated Build 步骤卡在“Creating”处
我使用了 create an Automated Build 中的此链接 ( this guide ) . 浏览器错误控制台显示: https://hub.docker.com/v2/reposito
sql - CREATE PROC 和 CREATE PROCEDURE 有什么区别？
我已经搜索了 msdn 并没有找到答案。我应该知道有什么区别吗？如果真的没有区别，那么为什么会存在这种冗余？ --SQL Server Stored Procedure Syntax CREATE
javascript - "create"指定主 "create"时不使用嵌套对象的 KO 映射选项
我有以下内容: var CardViewModel = function (data) { ko.mapping.fromJS(data, {}, this); this.editin

首页

博学

6Ren·AI

商城

google-chrome-extension - Chrome 扩展 : How to create?