{"id":646,"date":"2023-02-28T19:42:51","date_gmt":"2023-02-28T18:42:51","guid":{"rendered":"https:\/\/www.stefanvd.net\/blog\/?p=646"},"modified":"2024-05-01T19:13:45","modified_gmt":"2024-05-01T18:13:45","slug":"from-0-to-hero-how-to-create-a-mobile-chrome-extension-android-and-ios","status":"publish","type":"post","link":"https:\/\/www.stefanvd.net\/blog\/2023\/02\/28\/from-0-to-hero-how-to-create-a-mobile-chrome-extension-android-and-ios\/","title":{"rendered":"From 0 to Hero: How to Create a Mobile Chrome Extension Android &#038; iOS"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><p>Table of Contents<\/p><nav><ul><li><a href=\"#mobile-web-browsers\">Mobile Web Browsers<\/a><ul><li><a href=\"#what-is-a-mobile-web-browser\">What is a Mobile Web Browser?<\/a><\/li><li><a href=\"#what-is-a-mobile-chrome-extension\">What is a Mobile Chrome Extension?<\/a><ul><li><a href=\"#platforms\">Platforms<\/a><\/li><\/ul><\/li><li><a href=\"#overview-web-browsers\">Overview web browsers<\/a><ul><li><a href=\"#what-is-the-google-chrome-web-browser\">What is the Google Chrome web browser?<\/a><\/li><li><a href=\"#what-is-the-safari-web-browser\">What is the Safari web browser?<\/a><\/li><li><a href=\"#what-is-the-microsoft-edge-web-browser\">What is the Microsoft Edge web browser?<\/a><\/li><li><a href=\"#what-is-the-firefox-web-browser\">What is the Firefox web browser?<\/a><\/li><li><a href=\"#what-is-the-samsung-internet-web-browser\">What is the Samsung Internet web browser?<\/a><\/li><li><a href=\"#what-is-the-opera-web-browser\">What is the Opera web browser?<\/a><\/li><li><a href=\"#what-is-the-uc-web-browser\">What is the UC web browser?<\/a><\/li><li><a href=\"#what-is-the-maxthon-web-browser\">What is the Maxthon web browser?<\/a><\/li><li><a href=\"#what-is-the-yandex-web-browser\">What is the Yandex web browser?<\/a><\/li><li><a href=\"#what-is-the-vivaldi-web-browser\">What is the Vivaldi web browser?<\/a><\/li><li><a href=\"#what-is-the-brave-web-browser\">What is the Brave web browser?<\/a><\/li><li><a href=\"#what-is-the-kiwi-web-browser\">What is the Kiwi web browser?<\/a><\/li><li><a href=\"#what-is-the-c\u1ed1c-c\u1ed1c-web-browser\">What is the C\u1ed1c C\u1ed1c web browser?<\/a><\/li><li><a href=\"#what-is-the-naver-whale-web-browser\">What is the Naver Whale web browser?<\/a><\/li><li><a href=\"#what-is-the-orion-web-browser\">What is the Orion web browser?<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#how-to-create-a-mobile-browser-extension\">How to Create a Mobile Browser Extension?<\/a><ul><li><a href=\"#android\">Android<\/a><ul><li><a href=\"#firefox\">Firefox<\/a><\/li><li><a href=\"#samsung-internet\">Samsung Internet<\/a><\/li><li><a href=\"#yandex\">Yandex<\/a><\/li><li><a href=\"#kiwi\">Kiwi<\/a><\/li><\/ul><\/li><li><a href=\"#i-os\">iOS<\/a><ul><li><a href=\"#safari\">Safari<\/a><\/li><li><a href=\"#orion\">Orion<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#addition-resource\">Addition resource<\/a><\/li><li><a href=\"#final-remarks\">Final remarks<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>It is now the year 2023, and the world number of users using a smartphone has been set at 6.84 billion users today. And by mid-November 2022 we did reach 8 billion people on planet Earth. This means that 85.5% of the world&#8217;s population owns a smartphone. That is a huge number, and also a huge opportunity to build and create applications on mobile devices. Such as on the iOS and Android platforms.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>6,841 millions number of smartphone subscriptions worldwide in 2023<\/p>\n<cite><a href=\"https:\/\/www.statista.com\/statistics\/330695\/number-of-smartphone-users-worldwide\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source from the statista company leading provider of market and consumer data for the number of smartphone subscriptions worldwide on the year 2023<\/a><\/cite><\/blockquote>\n\n\n\n<p>In this article, you get an overview of all mobile web browsers available today that support mobile extensions. And how you as a beginner and expert developer can create your first Mobile Chrome Extension (that is based on the Chromium extension technology).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"mobile-web-browsers\">Mobile Web Browsers<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-a-mobile-web-browser\">What is a Mobile Web Browser?<\/h3>\n\n\n\n<p>Mobile web browsers, as the name suggests, are web browsers that are designed specifically for use on mobile devices such as smartphones and tablets, and allow the user to access and navigate the internet. It typically has features such as bookmarking, history, and support for HTML, CSS, and JavaScript, and may also have additional features such as ad-blocking and privacy settings.<\/p>\n\n\n\n<p>Examples of mobile web browsers include Apple Safari on iOS devices and Google Chrome on Android devices. The most popular devices that users use are the iPhone, iPad, Galaxy, Galaxy Z Fold, and Galaxy Tab S.<\/p>\n\n\n\n<p>On the market, there are two big platforms. Android from the company Alphabet (whereby Google is a subsidiary), and iOS from the company Apple. It has both support for touch and an external keyboard. And each web browser has its own powerful web rendering engine.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-a-mobile-chrome-extension\">What is a Mobile Chrome Extension?<\/h3>\n\n\n\n<p>It is a browser extension on mobile and is a software program that adds additional functionality to a mobile web browser. These extensions can provide a wide range of features, such as ad-blocking, password management, or even providing the ability to <a href=\"https:\/\/www.turnoffthelights.com\" target=\"_blank\" rel=\"noreferrer noopener\">convert the web page to your own dark mode theme with the Turn Off the Lights browser extension<\/a>. Like desktop browser extensions, mobile browser extensions are typically developed by third-party developers and can be downloaded and installed from an app store or the developer&#8217;s website.<\/p>\n\n\n\n<p>However, the availability of browser extensions on mobile is not as common as on desktop, since mobile browsers have limited support for extensions. For example, there is no support for a right-click menu (<code>contextmenus<\/code>), the extension button can be hidden or merged into one icon in the toolbar, the options page needs a UX design for a smaller screen, etc.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"platforms\">Platforms<\/h4>\n\n\n\n<p>In this table, you see an overview of where you can publish and use the <strong>Chrome extension<\/strong> on a mobile device.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>Desktop<\/td><td>iOS<\/td><td>Android<\/td><\/tr><tr><td>Google Chrome<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><\/tr><tr><td>Safari<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark> (Mac)<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td>&#8211;<\/td><\/tr><tr><td>Microsoft Edge<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><\/tr><tr><td>Firefox<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><\/tr><tr><td>Samsung Internet<\/td><td>&#8211;<\/td><td>&#8211;<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><\/tr><tr><td>Opera<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><\/tr><tr><td>UC<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><\/tr><tr><td>Maxthon<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><\/tr><tr><td>Yandex<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/mark><\/td><\/tr><tr><td>Vivaldi<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><\/tr><tr><td>Brave<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><\/tr><tr><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-black-color\">Kiwi<\/mark><\/td><td>&#8211;<\/td><td>&#8211;<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><\/tr><tr><td>C\u1ed1c C\u1ed1c<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><\/tr><tr><td>Naver Whale<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark><\/td><\/tr><tr><td>Orion<\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark><\/td><td>&#8211;<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Compatibility with Chrome extensions<\/figcaption><\/figure>\n\n\n\n<p><strong>Table Declaration Note:<\/strong><\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">YES<\/mark> = It can install and use mobile browser extensions<br><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">NO<\/mark> = It does not support mobile browser extensions<br>&#8211; = The app is not supported on that platform<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"overview-web-browsers\">Overview web browsers<\/h3>\n\n\n\n<p>All these web browsers use WebExtension technology to create the browser extensions. And are connected to the <a href=\"https:\/\/www.w3.org\/community\/webextensions\/\" target=\"_blank\" rel=\"noreferrer noopener\">W3C WebExtensions Community Group (WECG)<\/a>. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-google-chrome-web-browser\">What is the Google Chrome web browser?<\/h4>\n\n\n\n<p>Google Chrome: Developed by Google, Chrome is one of the most popular web browsers in the world today. That has a 65% browser market share. It is available on both Android and iOS and offers features such as syncing with the desktop version, a wide range of extensions, and a fast browsing experience. And use <strong>Blink<\/strong> as a web rendering engine. Furthermore, Google publishes its free and Open-Source web browser code online, so other developers can it in their projects. This web browser project is named Chromium. Whereby big companies already using it such as Microsoft and Opera.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-safari-web-browser\">What is the Safari web browser?<\/h4>\n\n\n\n<p>Safari: Developed by Apple, Safari is the default web browser on iOS devices. That has 18% of the browser market share. It offers a clean, simple interface and a range of features such as a Reading List, which allows users to save articles for later reading, and Safari extensions. However, on Apple, there is no separate store to download the Safari extension. You need to download the app from the App Store to get this Safari extension installed on your device. That for each platform Mac App Store, and iOS App Store. Apple use for his web browser their own <strong>WebKit<\/strong> rendering engine.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-microsoft-edge-web-browser\">What is the Microsoft Edge web browser?<\/h4>\n\n\n\n<p>Microsoft Edge: Developed by Microsoft, Edge is a web browser that is available on both Android and iOS. With a 4.4% web browser market share. It offers a range of features such as a built-in reading mode, syncing with the desktop version, and a wide range of extensions. Before Microsoft Edge used its own web rendering engine called <strong>EdgeHTML<\/strong>. However, since 2009 Micorosft switched and work together on the code base of the <strong>Chromium<\/strong> web browser.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-firefox-web-browser\">What is the Firefox web browser?<\/h4>\n\n\n\n<p>Mozilla Firefox: Developed by Mozilla, Firefox is a popular web browser that is available on both Android and iOS. That has a 3% web browser market share. It offers a wide range of features such as syncing with the desktop version, a private browsing mode, and support for a wide range of extensions. And use Mozilla&#8217;s own web rendering called <strong>Gecko<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-samsung-internet-web-browser\">What is the Samsung Internet web browser?<\/h4>\n\n\n\n<p>Samsung Internet: Developed by Samsung for its Android-based devices. With a web browser market share of 2,6%. It is based on the open-source <strong>Chromium<\/strong> project and includes features such as an ad blocker, password manager, and integration with Samsung&#8217;s other apps and services. It also includes support for extensions and web standards such as WebVR and WebAR. Samsung Internet is pre-installed on Samsung Galaxy devices and can also be downloaded from the Google Play Store.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-opera-web-browser\">What is the Opera web browser?<\/h4>\n\n\n\n<p>Opera: Developed by Opera Software, Opera is a web browser that is available on both Android and iOS. That is with a 2,4% web browser market share. It offers a range of features such as a built-in VPN, a battery-saving mode, and a data-saving mode. It is a <strong>Chromium<\/strong> web browser. Before they use the <strong>Presto<\/strong> web rendering engine.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-uc-web-browser\">What is the UC web browser?<\/h4>\n\n\n\n<p>UC (UCWeb or UC Browser) is a mobile web browser developed by UCWeb, a subsidiary of the Chinese multinational company Alibaba Group. It is available on a variety of platforms including Android, iOS, Windows Phone, Symbian, and Java ME. With a 0.88% web browser market share.<\/p>\n\n\n\n<p>UC Browser is known for its high speed and is popular in countries such as India, China, and Indonesia. It also includes features such as ad blocking, data compression, and support for downloading videos and music. And use the <strong>Chromium<\/strong> web browser engine.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-maxthon-web-browser\">What is the Maxthon web browser?<\/h4>\n\n\n\n<p>Maxthon is a web browser developed by the Chinese company Maxthon Ltd. It is available on a variety of platforms including Windows, Mac, iOS, and Android. Maxthon is known for its high speed and features such as support for extensions, a built-in ad blocker, and a cloud-based note-taking feature. And use the <strong>Chromium<\/strong> web browser engine.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-yandex-web-browser\">What is the Yandex web browser?<\/h4>\n\n\n\n<p>Yandex Browser is a web browser developed by the Russian internet company Yandex. It is available for Windows, Mac, iOS, and Android. Yandex Browser is known for its high-speed and minimalistic user interface.<\/p>\n\n\n\n<p>It also includes features such as ad blocking, a stealth mode (for private browsing), and a VPN (Virtual Private Network) service built-in. Additionally, it offers a feature called &#8220;Turbo&#8221; which compresses web pages for faster loading on slow internet connections. It also includes a feature called &#8220;SmartBox&#8221; which is a combined search and address bar. And use the <strong>Chromium<\/strong> web browser engine.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-vivaldi-web-browser\">What is the Vivaldi web browser?<\/h4>\n\n\n\n<p>Vivaldi is a web browser developed by Vivaldi Technologies, a company founded by the former CEO of Opera Software, Jon von Tetzchner. It is available for Windows, Mac, and Linux operating systems. Vivaldi is known for its customization options, such as the ability to change the browser&#8217;s appearance using custom themes and to arrange the browser interface according to the user&#8217;s preference.<\/p>\n\n\n\n<p>It also includes built-in features such as a screenshot tool, a note-taking feature, and a &#8220;Speed Dial&#8221; feature that allows users to quickly access frequently visited websites. Additionally, it offers advanced tab management, such as the ability to stack tabs and group tabs by domain. It also includes privacy-enhancing features like a built-in VPN and a tracker blocker. That is the <strong>Chromium<\/strong> base engine.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-brave-web-browser\">What is the Brave web browser?<\/h4>\n\n\n\n<p>Brave is a web browser that aims to block website trackers and remove intrusive Internet advertisements. It is based on the open-source <strong>Chromium<\/strong> project and was founded by Brendan Eich, the inventor of JavaScript and co-founder of Mozilla. In addition to its privacy features, Brave also includes a built-in ad-blocking tool and a cryptocurrency-based system that allows users to reward their favorite websites with the Basic Attention Token.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-kiwi-web-browser\">What is the Kiwi web browser?<\/h4>\n\n\n\n<p>The Kiwi web browser is a mobile web browser that is based on Google&#8217;s Chromium open-source project. That is created by a developer in Estonia. It is designed to be fast, lightweight, and privacy-focused, and it is available for Android devices.<\/p>\n\n\n\n<p>One of the main features of Kiwi is its built-in ad blocker, which can help to speed up browsing and reduce data usage. And support for Chrome extensions.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-c\u1ed1c-c\u1ed1c-web-browser\">What is the C\u1ed1c C\u1ed1c web browser?<\/h4>\n\n\n\n<p>C\u1ed1c C\u1ed1c is a web browser developed by a Vietnamese company of the same name. It is designed for the Vietnamese market and supports both the Vietnamese and English languages. The browser is based on the <strong>Chromium<\/strong> Open-Source project and includes features such as a built-in ad-blocker, anti-phishing and anti-malware protection, and a &#8220;smart&#8221; pop-up blocker. It also includes a built-in translation feature, which can translate web pages from Vietnamese to English and vice versa. C\u1ed1c C\u1ed1c&#8217;s popularity in Vietnam is due to its feature of supporting the Vietnamese language and its good performance. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-naver-whale-web-browser\">What is the Naver Whale web browser?<\/h4>\n\n\n\n<p>Naver Whale is a web browser developed by Naver Corporation, a South Korean online platform operated by Naver Corporation. It is based on <strong>Chromium<\/strong> open-source project, which means it shares the same core technologies as Google Chrome.<\/p>\n\n\n\n<p>Naver Whale browser has a variety of features that are optimized for the Korean market, such as integration with Naver&#8217;s search engine and other services, built-in translation, and support for Korean web standards. The browser also has a feature called &#8220;Whale Extension&#8221;, which allows users to customize the browser with various functionality and design. Naver Whale is a popular browser in South Korea, especially because of its integration with Naver&#8217;s services.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-the-orion-web-browser\">What is the Orion web browser?<\/h4>\n\n\n\n<p>It is a very new browser on the market. It is a web browser that is using the Open-Source WebKit browser engine code, and with expansion to load Chrome extension and Firefox extension using their own port code to convert the API to a web browser action.<\/p>\n\n\n\n<p>It allows you to run Google Chrome extensions and Firefox extensions in the Orion web browser. And that includes the Turn Off the Lights Chrome extension from the Chrome Web Store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-create-a-mobile-browser-extension\">How to Create a Mobile Browser Extension?<\/h2>\n\n\n\n<p>Currently, there are two markets, that is on Android (using Firefox and Samsung Internet) and iOS (using Safari and Orion).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"android\">Android<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"firefox\">Firefox<\/h4>\n\n\n\n<p>If you have a desktop Firefox extension already in the Add-on gallery, then you can easily add support for the Android platform for your Firefox extension. Here are the steps on how to make it available on Android:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your <a href=\"https:\/\/addons.mozilla.org\/en-US\/developers\/addons\" target=\"_blank\" rel=\"noopener\">https:\/\/addons.mozilla.org\/en-US\/developers\/addons<\/a><\/li>\n\n\n\n<li>On this web page, you all see your developed Firefox extensions. And below each title, you see the text &#8220;Actions&#8221;. Click on the link &#8220;More&#8221;, and then on &#8220;Manage Status &amp; Versions&#8221;<\/li>\n\n\n\n<li>A new web page will open with all your versions for that Firefox extension. Then click on the blue hyperlink for the latest version. And you see this screen:<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"881\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/firefox-extension-android-support-1024x881-1.webp\" alt=\"Turn Off the Lights Firefox extension compatibility with Firefox for Android\" class=\"wp-image-1745\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/firefox-extension-android-support-1024x881-1.webp 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/firefox-extension-android-support-1024x881-1-300x258.webp 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2024\/05\/firefox-extension-android-support-1024x881-1-768x661.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Turn Off the Lights Firefox extension compatibility with Firefox for Android<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Now at the &#8220;compatibility&#8221; add &#8220;Firefox for Android&#8221; to the list. With the web browser version such as 57.0 and higher with the * character symbol.<\/li>\n<\/ol>\n\n\n\n<p>And that is it. Now, your Firefox extension is available for Firefox for Android.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"samsung-internet\">Samsung Internet<\/h4>\n\n\n\n<p>On Android, you can customize the web further with the Samsung Internet extension. And here are the steps to get your first Mobile Chrome extension on the Gallary store, that using your existing desktop Chrome extension:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create account <a href=\"https:\/\/developer.samsung.com\" target=\"_blank\" rel=\"noreferrer noopener\">developer Samsung account<\/a><\/li>\n\n\n\n<li>Agreed on the beta of the Samsung Internet Extension program<\/li>\n\n\n\n<li>Upload the file ZIP to the special developer Samsung Upload page<\/li>\n\n\n\n<li>You receive the APK Android package app file, and upload this file to the Samsung Galaxy Store.<\/li>\n\n\n\n<li>When the review is done on the Samsung store, your users can tap to install the extension, and no need to open an app. Open the Samsung Internet app, and navigate to the extension to toggle the extension on your Android device.<\/li>\n<\/ol>\n\n\n\n<p>Note: <a href=\"https:\/\/developer.samsung.com\/internet\/android\/extension-guide.html#Join-the-Samsung-Internet-Extensions-development-program\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">You must be a member of the closed Samsung Internet Extension program<\/a>. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"yandex\">Yandex<\/h4>\n\n\n\n<p>On the Yandex mobile browser for Android, it supports existing Chrome extensions from the Chrome Web Store. But on iOS it is not provided.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"kiwi\">Kiwi<\/h4>\n\n\n\n<p>On the Kiwi Android web browser, you do not need extra work. Because the Chrome extension from Chrome Web Store can be installed on the Kiwi web browser.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-os\">iOS<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"safari\">Safari<\/h4>\n\n\n\n<p>In the Apple Safari web browser, you can use the same Chrome extension code to convert it to Safari extension for Mobile and Desktop users. Here are the simple steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Make sure you have installed Xcode on your Mac computer<\/li>\n\n\n\n<li>Have the unzipped Chrome extension on your desktop folder<\/li>\n\n\n\n<li>Then execute this path in your Terminal, and it creates a complete Xcode project. That includes the app on macOS and iOS and the shared folder that contains your new Safari extension.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>xcrun safari-web-extension-converter \/path\/to\/extension<\/code><\/pre>\n\n\n\n<p>That is it. Now you can run and test your Safari extension on desktop and mobile on your iPhone and iPad.<\/p>\n\n\n\n<p>Important is to check if the API you use in your Chrome extension is also supported by the Safari web browser. <a href=\"https:\/\/developer.apple.com\/documentation\/safariservices\/safari_web_extensions\/assessing_your_safari_web_extension_s_browser_compatibility\" target=\"_blank\" rel=\"noreferrer noopener\">You can see it on this compatibility documentation page<\/a>.<\/p>\n\n\n\n<p>Then upload the app with the Xcode to the App Store. Follow this guide from Apple on how to <a href=\"https:\/\/developer.apple.com\/documentation\/xcode\/preparing-your-app-for-distribution\" target=\"_blank\" rel=\"noreferrer noopener\">prepare your mobile Safari extension for the App Store.<\/a> And <a href=\"https:\/\/developer.apple.com\/documentation\/xcode\/distributing-your-app-for-beta-testing-and-releases\" target=\"_blank\" rel=\"noreferrer noopener\">how to distribute the app itself to the App Store<\/a>. Also, an Apple Developer membership (yearly subscription of 99 USD) is needed to keep your apps online for the users.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"orion\">Orion<\/h4>\n\n\n\n<p>There is no extra developer time needed to get it working on the iOS web browser, you just need to install the Orion web browser app from the Apple App Store. Go to the Chrome Web Store or Firefox Add-on Gallery website. You can install existing Chrome extensions and Firefox extensions in the Orion web browser.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Orion support for Web Extensions API is still experimental and only 70% of the Chrome extensions works in the Orion web browser.<\/p>\n<cite><a href=\"https:\/\/browser.kagi.com\/faq.html#extensions:~:text=Orion%20currently%20supports,on%20certain%20websites.\" target=\"_blank\" rel=\"noopener\">https:\/\/browser.kagi.com\/faq.html#extensions:~:text=Orion%20currently%20supports,on%20certain%20websites.<\/a><\/cite><\/blockquote>\n\n\n\n<p>Here are the steps to install the Zoom Chrome extension iOS:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download the <a href=\"https:\/\/browser.kagi.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/browser.kagi.com\/<\/a> iOS web browser on your iPhone or iPad<\/li>\n\n\n\n<li>Open the app and you see this home screen:<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-473x1024.png\" alt=\"The Orion web browser on iOS that can install a Mobile Chrome Extension\" class=\"wp-image-786\" style=\"width:237px;height:512px\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-473x1024.png 473w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-139x300.png 139w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-768x1662.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-710x1536.png 710w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app.png 828w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Tap on 3 dot icons on the right bottom of your screen<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-zoom-extension-on-the-chrome-web-store-473x1024.png\" alt=\"Install the Zoom Chrome extension in the Orion web browser\" class=\"wp-image-787\" style=\"width:237px;height:512px\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-zoom-extension-on-the-chrome-web-store-473x1024.png 473w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-zoom-extension-on-the-chrome-web-store-139x300.png 139w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-zoom-extension-on-the-chrome-web-store-768x1662.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-zoom-extension-on-the-chrome-web-store-710x1536.png 710w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-zoom-extension-on-the-chrome-web-store.png 828w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Tap on 3 dot icons on the right bottom of your screen<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-installation-permission-box-473x1024.png\" alt=\"Orion web browser dialog to add the mobile chrome extension\" class=\"wp-image-788\" style=\"width:237px;height:512px\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-installation-permission-box-473x1024.png 473w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-installation-permission-box-139x300.png 139w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-installation-permission-box-768x1662.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-installation-permission-box-710x1536.png 710w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-installation-permission-box.png 828w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>Tap on 3 dot icons on the right bottom of your screen<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-3-dot-icon-473x1024.png\" alt=\"Open the Orion extension page from the menu\" class=\"wp-image-789\" style=\"width:237px;height:512px\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-3-dot-icon-473x1024.png 473w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-3-dot-icon-139x300.png 139w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-3-dot-icon-768x1662.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-3-dot-icon-710x1536.png 710w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-3-dot-icon.png 828w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>Tap on 3 dot icons on the right bottom of your screen<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-toggle-on-zoom-chrome-extension-473x1024.png\" alt=\"Overview of all the installed Mobile Chrome extensions in the Orion web browser on iOS\" class=\"wp-image-790\" style=\"width:237px;height:512px\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-toggle-on-zoom-chrome-extension-473x1024.png 473w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-toggle-on-zoom-chrome-extension-139x300.png 139w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-toggle-on-zoom-chrome-extension-768x1662.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-toggle-on-zoom-chrome-extension-710x1536.png 710w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/01\/orion-ios-app-toggle-on-zoom-chrome-extension.png 828w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/figure>\n\n\n\n<p>And now you can enjoy the web with your favorite browser extension on your mobile device.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"addition-resource\">Addition resource <\/h2>\n\n\n\n<p>To learn more about Chrome Extension Manifest V3 APIs and continue to create a creative experience for the users, see these resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/groups.google.com\/a\/chromium.org\/g\/chromium-extensions?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">Chromium Extension group<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/extensions\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome Extension Developer Documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.samsung.com\/internet\/android\/extension-guide.html\" target=\"_blank\" rel=\"noreferrer noopener\">Samsung Internet Extension<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/documentation\/safariservices\/safari_web_extensions\/converting_a_web_extension_for_safari\" target=\"_blank\" rel=\"noreferrer noopener\">Converting a web extension for Safari<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/help.kagi.com\/orion\/browser-extensions\/macos-extensions.html\" target=\"_blank\" rel=\"noreferrer noopener\">Orion web browser documentation<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-remarks\">Final remarks<\/h2>\n\n\n\n<p>Web browser extensions are small software programs that can be installed in a web browser to add additional functionality. They can be used to block ads, save passwords, and even play games.<\/p>\n\n\n\n<p>In conclusion, mobile web browsers have become an essential part of our daily lives, allowing us to access the internet on the go. The list of popular mobile web browsers includes Google Chrome, Safari, Mozilla Firefox, Opera, and Microsoft Edge. Each browser offers unique features and it is up to the user to choose the browser that best fits their needs.<\/p>\n\n\n\n<p>I hope you enjoyed and learn more about all the mobile web browser that is available and how you can get your first Mobile Chrome extension on Android and iOS. I want to share this with the browser extension community. If you would like to support me, consider <a href=\"https:\/\/www.stefanvd.net\/donate\/\" target=\"_blank\" rel=\"noreferrer noopener\">a small donation<\/a> to my web community work.<\/p>\n\n\n\n<p><em>Content Disclaimer: This is individual research on how you create your first Mobile Chrome Extension, that I want to share with the browser extension community. I am not paid by Apple or Google or Orion or Samsung.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is now the year 2023, and the world number of users using a smartphone has been set at 6.84 billion users today. And by mid-November 2022 we did reach 8 billion people on planet Earth. This means that 85.5% of the world&#8217;s population owns a smartphone. That is a huge number, and also a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":791,"comment_status":"closed","ping_status":"open","sticky":false,"template":"single-full-width.php","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[],"class_list":["post-646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-browser","category-programming"],"_links":{"self":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/comments?post=646"}],"version-history":[{"count":50,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/646\/revisions"}],"predecessor-version":[{"id":1746,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/646\/revisions\/1746"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media\/791"}],"wp:attachment":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media?parent=646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/categories?post=646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/tags?post=646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}