Chrome拡張機能を20分で作成して公開する方法

Chrome拡張機能を作成するとどうなるか疑問に思ったことはありませんか?さて、私はそれがどれほど簡単かをあなたに話すためにここにいます。これらの手順に従うと、アイデアが実現し、Chromeウェブストアで実際の拡張機能をすぐに公開できるようになります。

Chrome拡張機能とは何ですか?

Chrome拡張機能を使用すると、ネイティブコードを深く掘り下げることなく、Chromeウェブブラウザに機能を追加できます。Web開発者がよく知っているコアテクノロジー(HTML、CSS、JavaScript)を使用してChromeの新しい拡張機能を作成できるので、これはすばらしいことです。Webページを作成したことがある場合は、昼食をとるよりも早く拡張機能を作成できます。学ぶ必要があるのは、Chromeが公開するJavaScriptAPIのいくつかを介してChromeにいくつかの機能を追加する方法だけです。

Webページの作成にまだ慣れていない場合は、まず、freeCodeCampなどのコーディング方法を学ぶためにいくつかの無料のリソースに飛び込むことをお勧めします。

何を作りたいですか?

始める前に、何を構築したいかについて大まかなアイデアを持っている必要があります。新しい画期的なアイデアである必要はありません。楽しみのためにこれを行うことができます。この記事では、私のアイデアと、それをChrome拡張機能に実装する方法について説明します。

計画

Unsplash Chrome拡張機能をしばらく使用しました。これにより、デフォルトのタブにUnsplashの素敵な背景画像を表示できます。後で、デフォルトのタブをWeb全体からのデザインニュースやショットのフィードに変えるMuzliChrome拡張機能に置き換えました。

これらの2つの拡張機能をインスピレーションとして使用して、新しいものを作成しましょう。ただし、今回は映画愛好家向けです。私の考えは、新しいタブを開くたびに、映画の背景画像をランダムに表示することです。スクロールすると、人気のある映画やテレビ番組の素敵なフィードに変わるはずです。それでは始めましょう。

ステップ1:設定

最初のステップは、という名前のマニフェストファイルを作成することですmanifest.json。これは、拡張機能の名前、説明、バージョン番号などのプロパティを含むJSON形式のメタデータファイルです。このファイルでは、拡張機能が何をするのか、そしてどのような権限が必要かをChromeに伝えます。

映画の拡張子については、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”]}

ご覧のとおり、これnewtab.htmlは新しいタブが開かれるたびにレンダリングされるHTMLファイルになると言えます。これを行うには、activeTabを制御する権限が必要です。そのため、ユーザーが拡張機能をインストールしようとすると、拡張機能に必要なすべての権限が警告されます。

内部のもう1つの興味深い点manifest.jsonは、ブラウザーのアクションです。この例では、これを使用してタイトルを設定しますが、さらに多くのオプションがあります。たとえば、アドレスバー内のアプリアイコンをクリックするたびにポップアップを表示するには、次のようにするだけです。

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

これでpopup.html、ユーザーがブラウザのアクションをクリックしたときに作成されるポップアップウィンドウ内にレンダリングされます。これは標準のHTMLファイルであるため、ポップアップの表示内容を自由に管理できます。魔法の一部をpopup.html。という名前のファイルに入れるだけです。

ステップ2:それが機能するかどうかをテストする

次のステップは、newtab.htmlファイルを作成して ' Hello world'に入れることです:

  Test   

Hello World!

それが機能するかどうかをテストするにchrome://extensionsは、ブラウザにアクセスして、右上隅の[開発者モード]チェックボックスがオンになっていることを確認します。

[解凍した拡張子読み込む]をクリックして、拡張子ファイルが存在するディレクトリを選択します。拡張機能が有効な場合、すぐにアクティブになるため、新しいタブを開いて「Helloworld」を表示できます。

ステップ3:物事を良くする

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.

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.

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.

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.

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:

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.

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 changesand that’s it, your done!

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.

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!

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!

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.

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

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.