chrome扩展程序_如何在20分钟内创建和发布Chrome扩展程序

chrome扩展程序

by Jake Prins

杰克·普林斯(Jake Prins)

如何在20分钟内创建和发布Chrome扩展程序 (How to Create and Publish a Chrome Extension in 20 minutes)

Ever wondered what it would be like to create a Chrome extension? Well, I’m here to tell you just how easy it is. Follow these steps and your idea will turn into reality and you’ll be able to publish a real extension in the Chrome Web Store in no time.

有没有想过创建一个Chrome扩展会是什么样子？ 好吧，我在这里告诉你这是多么容易。 请按照以下步骤操作，您的想法将变为现实，您将能够立即在Chrome网上应用店中发布真实的扩展程序。

什么是Chrome扩展程序？ (What is a Chrome extension?)

Chrome extensions allow you to add functionality to the Chrome web browser without diving deeply into native code. That’s awesome because you can create new extensions for Chrome with core technologies that web developers are very familiar with - HTML, CSS, and JavaScript. If you’ve ever built a web page, you’ll will be able to create an extension faster than you can have lunch. The only thing you need to learn is how to add some functionality to Chrome through some of the JavaScript APIs that Chrome exposes.

Chrome扩展程序可让您向Chrome网络浏览器添加功能，而无需深入研究本机代码。 太好了，因为您可以使用网络开发人员非常熟悉的核心技术(HTML，CSS和JavaScript)为Chrome创建新的扩展程序。 如果您曾经建立过网页，那么创建扩展程序的速度将比午餐时间快。 您唯一需要学习的就是如何通过Chrome公开的某些JavaScript API向Chrome添加一些功能。

If you’re not experienced yet in building web pages, I recommend you first dive into some free resources to learn how to code, like freeCodeCamp.

如果您还没有构建网页的经验，建议您先阅读一些免费资源以学习编码方法，例如freeCodeCamp 。

您要建造什么？ (What do you want to build?)

Before you start, you should have a rough idea of what you want to build. It doesn’t need to be some new groundbreaking idea, we can just do this for fun. In this article, I’ll be telling you about my idea and how I implemented it into a Chrome extension.

在开始之前，您应该大致了解要构建的内容。 不必是一些新的开创性想法，我们可以做些有趣的事情。 在本文中，我将向您介绍我的想法以及如何将其实现到Chrome扩展程序中。

计划 (The plan)

I’ve used the Unsplash Chrome extension for a while which allows me to have nice background images of Unsplash in my default tab. I later replaced it with the Muzli Chrome extension that turns the default tab into a feed of design news and shots from around the web.

我使用Unsplash Chrome扩展程序已有一段时间了，这使我可以在默认选项卡中获得漂亮的Unsplash背景图像。 后来，我将其替换为Muzli Chrome扩展程序，该扩展程序将默认选项卡转变为设计新闻和来自网络的快照。

Let’s use these two extensions as inspiration to build something new, but this time, for movie lovers. My idea is to show a random background image of a movie every time you open a new tab. On scroll it should turn into a nice feed of popular movies and TV shows. So let’s get started.

让我们以这两个扩展为灵感，为电影爱好者打造新的东西，但这一次。 我的想法是，每次打开新标签时，都会显示电影的随机背景图像。 在滚动时，它应该变成受欢迎的电影和电视节目的不错的提要。 因此，让我们开始吧。

步骤1：设定 (Step 1: Setting things up)

The first step is to create a manifest file named manifest.json. This is a metadata file in JSON format that contains properties like your extension’s name, description, version number and so on. In this file we tell Chrome what the extension is going to do, and what permissions it requires.

第一步是创建一个名为manifest.json的清单文件。 这是JSON格式的元数据文件，其中包含扩展名，描述，版本号等属性。 在此文件中，我们告诉Chrome扩展程序将要执行的操作以及所需的权限。

For the movie extension we need to have permission to control activeTab, so our manifest.json file looks something like this:

对于电影扩展，我们需要具有控制activeTab的权限，因此我们的manifest.json文件如下所示：

{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your   default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”,

"browser_action": {   "default_icon": "tab-icon.png",   “default_title”: “Have a good day” },

“chrome_url_overrides” : {  “newtab”: “newtab.html”},

“permissions”: [“activeTab”]}

As you can see, we say that newtab.html will be the HTML file that should be rendered every time a new tab gets opened. To do this we need to have permission to control the activeTab, so when a user tries to install the extension they will be warned with all the permissions the extension needs.

如您所见，我们说newtab.html将是每次打开新选项卡时应呈现HTML文件。 为此，我们需要具有控制activeTab的权限，因此，当用户尝试安装扩展程序时，将向他们发出扩展程序需要的所有权限的警告。

Another interesting thing inside the manifest.json are the browser actions. In this example we use it to set the title, but there are more options. For instance, to show a popup whenever you click on the app icon inside the address bar, all you have to do is something like this:

manifest.json内部的另一件有趣的事情是浏览器操作。 在此示例中，我们使用它来设置标题，但是有更多选项。 例如，要在您单击地址栏内的应用程序图标时显示弹出窗口，您要做的就是这样：

“browser_action”: {  “default_popup”: “popup.html”, },

Now, popup.html will be rendered inside the popup window that's created in response to a user's click on the browser action. It's a standard HTML file so it’s giving you free reign over what the popup displays. Just put some of your magic inside a file named popup.html.

现在， popup.html将呈现在为响应用户单击浏览器操作而创建的弹出窗口内。 这是一个标准HTML文件，因此您可以自由控制弹出窗口显示的内容。 只需将您的一些魔法放入名为popup.html的文件中。

步骤2：测试是否有效 (Step 2: Test if it works)

The next step is to create the newtab.html file and put in a ‘Hello world’:

下一步是创建newtab.html文件，并将其放入“ Hello world ”中：

<!doctype html><html>  <head>    <title>Test</title>  </head>  <body>    <h1>Hello World!</h1>  </body></html>

To test if it works, visit chrome://extensions in your browser and ensure that the Developer mode checkbox in the top right-hand corner is checked.

要测试它是否有效，请在浏览器中访问chrome://extensions ，并确保选中了右上角的“ 开发人员模式”复选框。

Click Load unpacked extension and select the directory in which your extension files live. If the extension is valid, it will be active straight away so you can open a new tab to see your ‘Hello world’.

单击加载解压缩的扩展名，然后选择扩展文件所在的目录。 如果该扩展名有效，它将立即处于活动状态，因此您可以打开一个新标签页以查看“ Hello world”。

步骤3：让事情变得美好 (Step 3: Making things nice)

Now that we got our first feature working, it’s time to make it nice. We can simply style our new tab by creating a main.css file in our extension directory and load it in our newtab.html file. The same goes when including a JavaScript file for any active functionality that you would like to include. Assuming that you have created a web page before, you can now use your magic to show your users whatever you want.

现在我们已经启用了第一个功能，是时候对其进行完善了。 我们可以通过在扩展目录中创建main.css文件并将其加载到newtab.html文件中来简单地设置新标签的样式。 当包含要包含的任何活动功能JavaScript文件时，也是如此。 假设您之前已经创建了一个网页，现在就可以使用魔术来向用户显示所需的内容。

完成计划 (Finishing up the plan)

All I further needed to finish the movie extension was HTML, CSS and JavaScript, so I don’t think it’s relevant to dive deep into the code, but I’d like to go through it quickly.

完成影片扩展所需要的只是HTML，CSS和JavaScript，所以我认为深入研究代码并不重要，但我想快速进行研究。

Here is what I did:

这是我所做的：

For my idea I needed some nice background images, so in the JavaScript file I used the TMDb API to fetch some popular movies, took their backdrop images and put them in an array. Whenever the page loads it now randomly picks one image from that array and sets it as the background of the page. To make this page a little more interesting I also added the current date in the top right corner. And for more information, it allows users to click the background which leads to visiting the movie’s IMDb page.

就我的想法而言，我需要一些漂亮的背景图像，因此在JavaScript文件中，我使用了TMDb API来获取一些受欢迎的电影，将它们的背景图像放入数组中。 现在，无论何时页面加载，它都会从该数组中随机选择一张图像并将其设置为页面背景。 为了使此页面更有趣，我还在右上角添加了当前日期。 有关更多信息，它允许用户单击背景，从而导致访问电影的IMDb页面。

I replaced the screen with a nice feed of popular movies when the user tries to scroll down. I used the same API to build cards of movies with an image, title, rating and vote count. Then, on clicking one of those cards, it shows the overview with a button to watch a trailer.

当用户尝试向下滚动时，我将屏幕替换为不错的流行电影源。 我使用相同的API来制作带有图像，标题，等级和投票数的电影卡。 然后，在其中一张卡片上单击时，它会显示概述，并带有一个用于观看预告片的按钮。

结果 (The result)

Now with that little manifest.json file and just some HTML, CSS and JavaScript, every new tab that you open looks a lot more interesting:

现在有了这个manifest.json文件，以及一些HTML，CSS和JavaScript，您打开的每个新标签看起来都更加有趣：

步骤4：发布扩充功能 (Step 4: Publish your extension)

When your first Chrome extension looks nice and works like it should, it’s time to publish it to the Chrome Store. Simply follow this link to go to your Chrome Web Store dashboard (you’ll be asked to sign in to your Google account if you’re not). Then click the Add new item button, accept the terms and you will go to the page where you can upload your extension. Now compress the folder that contains your project and upload that ZIP file.

当您的第一个Chrome扩展程序看上去不错并且可以正常工作时，就该将其发布到Chrome商店中了。 只需点击此链接即可转到您的Chrome网上应用店信息中心(如果没有，系统会要求您登录Google帐户)。 然后单击Add new item按钮，接受条款，您将转到可上载扩展程序的页面。 现在，压缩包含您的项目的文件夹并上传该ZIP文件。

After successfully uploading your file, you will see a form in which you should add some information about your extension. You can add an icon, a detailed description, upload some screenshots, and so on.

成功上传文件后，您会看到一个表单，您应该在其中添加一些有关扩展名的信息。 您可以添加图标，详细说明，上传一些屏幕截图，等等。

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changes and that’s it, your done!

确保提供一些漂亮的图像来炫耀您的项目。 商店可以使用这些图像来推广您的突破性项目。 您提供的图像越多，扩展名的特色就越突出。 您可以通过单击“ Preview changes按钮来Preview changes扩展程序在网络商店中的外观。 对结果满意后，请点击Publish changes Publish changes 就是这样，您完成了！

Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there). If you’re interested, you can find mine here.

现在，转到Chrome网上应用店，然后按标题搜索扩展程序(可能要花一些时间才能找到该扩展程序)。 如果您有兴趣，可以在这里找到我的。

The only thing left to do is get some users. So you might want to share a post about your life changing Chrome extension on social media. Tell your friends to check it out. Add it to ProductHunt. And don’t forget to share your project here in the comments. I’m curious to see what you came up with!

剩下要做的唯一一件事就是吸引一些用户。 因此，您可能想在社交媒体上分享有关改变生活的Chrome扩展的信息。 告诉你的朋友看看。 将其添加到ProductHunt 。 并且不要忘了在评论中分享您的项目。 我很想知道您的想法！

结论 (Conclusion)

As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and a basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!

作为网络开发人员，在很短的时间内创建Chrome扩展程序非常容易。 您只需要一些HTML，CSS，JavaScript以及有关如何通过Chrome公开的某些JavaScript API添加功能的基本知识。 您的初始设置可以在20分钟内发布到Chrome网上应用店中。 构建新的，有价值的或看起来不错的扩展程序将需要更多时间。 但这全由您决定！

Use your creativity to come up with something interesting and if you ever get stuck, the excellent Chrome extension documentation can probably help you out.

利用您的创造力提出一些有趣的东西，如果您遇到困难，出色的Chrome扩展程序文档可能会为您提供帮助。

So what are you waiting for? It’s time to start working on your own Chrome extension and turning your idea into reality.

那你还在等什么？ 是时候开始使用您自己的Chrome扩展程序并将您的想法变为现实了。

Don’t forget to share your project in the comments and hit the clap button if this article was any useful to you. If you got some time and want to be a hero, give my extension a positive rating. That would be highly appreciated!

如果这篇文章对您有用，请不要忘记在评论中分享您的项目并点击拍手按钮。 如果您有时间想成为英雄，请给我的扩展名积极的评价。 那将不胜感激！

Got questions or feedback? Let me know in the comments!

有问题或反馈吗？ 在评论中让我知道！

Thanks for reading! Hope the information was helpfull. Follow me on Medium for more tech related articles or on Twitter and Instagram @jakeprins_nl.

谢谢阅读！ 希望这些信息对您有所帮助。 在媒体上关注我，获取更多与技术相关的文章，或者在Twitter和Instagram @jakeprins_nl上关注我。

翻译自: https://www.freecodecamp.org/news/how-to-create-and-publish-a-chrome-extension-in-20-minutes-6dc8395d7153/

chrome扩展程序