<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Nabeel Ahmed Khan</title>
    <description>The latest articles on DEV Community by Nabeel Ahmed Khan (@n4beel).</description>
    <link>https://dev.to/n4beel</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F384063%2F726da49b-76d4-46a1-8bc0-9949bf0d19c7.jpeg</url>
      <title>DEV Community: Nabeel Ahmed Khan</title>
      <link>https://dev.to/n4beel</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/n4beel"/>
    <language>en</language>
    <item>
      <title>The DePIN Revolution: How Pakistan Can Build Its Future on Solana</title>
      <dc:creator>Nabeel Ahmed Khan</dc:creator>
      <pubDate>Thu, 11 Sep 2025 14:35:21 +0000</pubDate>
      <link>https://dev.to/n4beel/the-depin-revolution-how-pakistan-can-build-its-future-on-solana-14mp</link>
      <guid>https://dev.to/n4beel/the-depin-revolution-how-pakistan-can-build-its-future-on-solana-14mp</guid>
      <description>&lt;p&gt;For anyone who has ever had a crucial online exam interrupted by a power cut in Lahore, or a small business in Faisalabad that can't track its shipments, the infrastructure problem in Pakistan is not abstract, it's a daily reality. Our nation is a powerhouse of talent, boasting one of the world's largest freelance economies and a spirit of relentless innovation. Yet, our potential is often capped by the limitations of our physical infrastructure: inconsistent energy, patchy connectivity, and opaque supply chains.&lt;/p&gt;

&lt;p&gt;What if the solution wasn't to wait for large corporations or governments to build it all for us? What if we, the community, could build it ourselves, piece by piece?&lt;/p&gt;

&lt;p&gt;This isn't a far-fetched dream. It's the core principle behind one of the fastest-growing sectors in technology today: &lt;strong&gt;Decentralized Physical Infrastructure Networks (DePIN)&lt;/strong&gt;. Powered by high-speed blockchains like Solana, DePIN is enabling communities around the world to build, own, and operate their own infrastructure. Projects like Helium are creating community-owned 5G networks, Hivemapper is building a decentralized world map, and Render is distributing GPU power to creators globally.&lt;/p&gt;

&lt;p&gt;This article is a deep dive into the DePIN revolution. We'll explore what it is, why it's already a global phenomenon, and most importantly, how Pakistan's builders, entrepreneurs, and massive youth population can leverage it to solve our own unique challenges. This is more than just a technological trend; it's a timely opportunity for Pakistan to build a more resilient, transparent, and community-driven future.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is DePIN? The Power of People-Powered Networks
&lt;/h2&gt;

&lt;p&gt;At its heart, DePIN is a simple but powerful idea: &lt;strong&gt;it coordinates large groups of people to build and maintain real-world infrastructure.&lt;/strong&gt; Instead of one company owning and operating a fleet of delivery trucks or a network of cell towers, DePIN allows thousands of individuals to contribute their own resources (a vehicle, a WiFi hotspot, a solar panel) and get rewarded for it with cryptocurrency tokens.&lt;/p&gt;

&lt;p&gt;Think of it as the "Uber" or "Airbnb" model, but decentralized. There's no central company taking a large cut or controlling the entire system. Instead, a blockchain network acts as the transparent and automated backbone, connecting service providers (the community) with service consumers.&lt;/p&gt;

&lt;p&gt;Every DePIN project has three core components:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;The Physical Infrastructure:&lt;/strong&gt; These are the real-world devices that provide a service, from WiFi hotspots and 5G radios (like in Helium) to vehicle dashcams (like in Hivemapper) or solar panels.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;The Community of Contributors:&lt;/strong&gt; These are the individuals and organizations who buy, deploy, and maintain these devices. They are the backbone of the network.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;The Blockchain &amp;amp; Token Incentive:&lt;/strong&gt; A blockchain, like Solana, is used to verifiably track the data or service provided by the devices. It then automatically distributes token rewards to the contributors. This token creates a powerful economic incentive, encouraging more people to join and expand the network.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This creates a virtuous cycle: more contributors lead to better network coverage, which attracts more users, which in turn increases the value of the token rewards for contributors.&lt;/p&gt;

&lt;p&gt;Here is a simple flowchart illustrating how it works:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F13q13gbmbyl8dn5cjw4a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F13q13gbmbyl8dn5cjw4a.png" alt="Solana DePIN" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Global Giants: DePIN Success Stories on Solana
&lt;/h2&gt;

&lt;p&gt;DePIN is not just a theory; it's a multi-billion dollar industry with projects that have achieved massive scale. Many of the largest have chosen Solana as their foundation, and for good reason.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Helium (Decentralized Wireless):&lt;/strong&gt; Perhaps the most famous DePIN project, Helium set out to build a global, decentralized wireless network for Internet of Things (IoT) devices and later, 5G. Individuals buy Helium hotspots, place them in their homes or offices, and provide wireless coverage. In return, they earn &lt;code&gt;$HNT&lt;/code&gt; tokens. Helium’s network grew so large that it needed a blockchain that could handle millions of transactions from its nearly 1 million hotspots. In 2023, it migrated to Solana to leverage its low-cost, high-speed infrastructure, a move that proved essential for its continued scalability.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Hivemapper (Decentralized Mapping):&lt;/strong&gt; Hivemapper is building a decentralized alternative to Google Street View. Contributors install a Hivemapper-approved dashcam in their car and earn &lt;code&gt;$HONEY&lt;/code&gt; tokens for every kilometer they map. This crowdsourced approach allows Hivemapper to map the world far faster and more cheaply than a centralized company could. The data is used by businesses in logistics, navigation, and urban planning. Running on Solana allows Hivemapper to process and verify millions of map data points from its global fleet of contributors efficiently.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Render (Distributed GPU Compute):&lt;/strong&gt; Render created a marketplace for idle GPU power. Artists, researchers, and AI companies need immense computing power for rendering graphics or training models. Render allows anyone with a powerful GPU to connect their machine to the network and process jobs for these clients. In return, they earn &lt;code&gt;$RNDR&lt;/code&gt; tokens. This transforms expensive, underutilized hardware into a shared global resource.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Why Solana? The Engine for DePIN
&lt;/h3&gt;

&lt;p&gt;These projects all faced a similar challenge: how to manage a network with potentially millions of devices, all sending small bits of data that need to be verified and rewarded in near real-time. This is where Solana shines. Its architecture provides:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;High Throughput:&lt;/strong&gt; Solana can process tens of thousands of transactions per second, essential for handling data from a global device network.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Low Cost:&lt;/strong&gt; Transaction fees on Solana are fractions of a cent, making it economically viable to process millions of micro-transactions daily. Rewarding every contributor would be impossible on a high-fee blockchain.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Scalability:&lt;/strong&gt; With features like state compression, Solana can mint millions of NFTs (which can represent devices or data points) for a fraction of the traditional cost, allowing DePIN projects to scale without breaking the bank.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Pakistan Opportunity: From Local Problems to DePIN Solutions
&lt;/h2&gt;

&lt;p&gt;With its massive freelance economy, recurring energy shortages, and growing logistics networks, Pakistan is uniquely positioned to become a leader in the DePIN space. Here are a few concrete opportunities where DePIN could solve real, local problems.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Local Case Study: "Roshan Pakistan" - A Decentralized Energy Grid
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;The Problem:&lt;/strong&gt; Pakistan's centralized energy grid is overburdened, leading to frequent load-shedding and financial losses. At the same time, "kunda" culture (electricity theft) and billing inefficiencies create a cycle of distrust and instability.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The DePIN Solution:&lt;/strong&gt; Imagine a DePIN project focused on decentralized energy. Let's call it &lt;strong&gt;"Roshan Pakistan."&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Homeowners and businesses could install network-approved solar panels and smart meters.&lt;/li&gt;
&lt;li&gt;  During the day, they would use the energy they need and contribute their excess solar power to a local microgrid.&lt;/li&gt;
&lt;li&gt;  The smart meter, connected to the Solana blockchain, would verifiably track how much energy is contributed.&lt;/li&gt;
&lt;li&gt;  In return, contributors would earn a "ROSHAN" token for every kilowatt-hour they add to the grid. These tokens could be used to pay their utility bills or be traded.
This creates a more resilient, transparent, and community-owned energy market. It incentivizes clean energy adoption and provides a grassroots solution to the load-shedding crisis, neighborhood by neighborhood.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Local Case Study: "Pak-Track" - A Transparent Logistics Network
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;The Problem:&lt;/strong&gt; Pakistan's agricultural and textile sectors are vital to its economy, but they suffer from a lack of transparency in the supply chain. A mango farmer in Multan has no way to prove to an international buyer that their product is authentic and has been kept at the right temperature.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The DePIN Solution:&lt;/strong&gt; A logistics DePIN project, let's call it &lt;strong&gt;"Pak-Track,"&lt;/strong&gt; could solve this.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Small, low-cost IoT sensors (tracking location and temperature) could be deployed by contributors along major shipping routes.&lt;/li&gt;
&lt;li&gt;  A farmer or textile exporter would attach a sensor to their shipment. As the shipment moves from the farm to the port, it passes by these community-owned sensors, which automatically record its location and condition on the Solana blockchain.&lt;/li&gt;
&lt;li&gt;  This creates an immutable, verifiable record of the product's journey, accessible to the end buyer.
This would not only reduce fraud and improve efficiency but also build global trust in Pakistani products, potentially opening up new, premium export markets.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  A Real-World Playbook: How a Pakistani-Led DePIN MVP Was Built
&lt;/h2&gt;

&lt;p&gt;Instead of a theoretical playbook, let's look at a real DePIN project built for Pakistan's unique challenges: &lt;strong&gt;Ecorydes&lt;/strong&gt;. This project, developed by Pakistani entrepreneurs, moves beyond theory and provides a concrete example of how to launch a DePIN MVP.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Problem:&lt;/strong&gt; Major Pakistani cities like Karachi and Lahore are choked with traffic congestion, leading to high fuel costs for commuters, increased travel times, and significant air pollution. Traditional ride-hailing apps take large commissions, while informal carpooling lacks trust, transparency, and easy payment methods.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The MVP: Ecorydes — A Solana-Powered Carpooling Network&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Ecorydes is a peer-to-peer carpooling app built on Solana that directly addresses these issues. It's a prime example of a DePIN where the physical infrastructure is something people already own: their cars and smartphones.&lt;/p&gt;

&lt;p&gt;Here’s a breakdown of how it was built, following the DePIN model:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;The "Hardware" (The Contributor's Assets):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Unlike sensor networks, the core hardware for Ecorydes is the &lt;strong&gt;driver's vehicle&lt;/strong&gt; and both the &lt;strong&gt;driver's and rider's smartphones&lt;/strong&gt;. This lowers the barrier to entry, as millions of people already possess the necessary equipment to participate in the network.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Develop the Software (The Application Layer):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Mobile App:&lt;/strong&gt; A user-friendly mobile application allows users to either "Post a Ride" (for drivers) or "Find a Ride" (for riders).&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;P2P Matching Engine:&lt;/strong&gt; The backend matches riders with drivers who are already heading in the same direction, optimizing for the most efficient and eco-friendly routes.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Solana Integration:&lt;/strong&gt; The app is built on Solana to handle payments. By using crypto (like a stablecoin), it facilitates fast, secure, and borderless transactions directly between the driver and rider, eliminating the high fees charged by traditional middlemen.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Design the Tokenomics (The Incentive Layer):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Peer-to-Peer Payments:&lt;/strong&gt; Riders pay drivers directly for the shared ride using cryptocurrency on Solana. This acts as the base economic layer.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;DePIN Incentives:&lt;/strong&gt; Beyond the fare, Ecorydes can introduce a native token (let's call it &lt;code&gt;$ECO&lt;/code&gt;) to create a powerful flywheel effect. This token could be rewarded to drivers for:

&lt;ul&gt;
&lt;li&gt;  Completing a certain number of rides.&lt;/li&gt;
&lt;li&gt;  Maintaining high user ratings.&lt;/li&gt;
&lt;li&gt;  Contributing valuable route and traffic data back to the network.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;  This dual-income model (fare + token rewards) is a core DePIN principle that strongly incentivizes drivers to join and actively contribute to the network.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Launch and The Value Proposition:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;For Drivers:&lt;/strong&gt; They earn money from their empty car seats on routes they were already driving, plus potential bonus rewards in &lt;code&gt;$ECO&lt;/code&gt; tokens. This turns a daily commute into a source of income.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;For Riders:&lt;/strong&gt; They get access to cheaper, more convenient, and more social travel options compared to traditional ride-hailing services.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;For Pakistan:&lt;/strong&gt; The network as a whole helps reduce traffic congestion, lower collective fuel consumption, and decrease the nation's carbon footprint, a win for everyone.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;By showcasing Ecorydes, we see that a DePIN project in Pakistan doesn't have to be a far-off dream. It can start with a practical problem and leverage the power of community and blockchain to create a smarter, more efficient, and more rewarding future for everyone.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Forjnuol9qy5uz30xxrns.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Forjnuol9qy5uz30xxrns.png" alt="EcoRydes Banner" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Future is Decentralized and Pakistani-Led
&lt;/h2&gt;

&lt;p&gt;DePIN is more than just another crypto narrative. It represents a fundamental shift in how we build the world around us, a shift from centralized, top-down models to decentralized, community-up approaches. For a country with the dynamism, talent, and challenges of Pakistan, this is not an opportunity to watch from the sidelines.&lt;/p&gt;

&lt;p&gt;The global success of Helium, Hivemapper, and Render has proven the model. The power of Solana provides the necessary technology. Now, it is up to the builders of Pakistan to seize this moment. The next wave of infrastructure in our country may not be built by large corporations alone, but by its own people; one hotspot, one sensor, and one solar panel at a time. The revolution is here. Let's start building.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;References&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;a href="https://solana.com/solutions/depin" rel="noopener noreferrer"&gt;Solana DePIN Overview&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;a href="https://github.com/solana-developers/DePIN-Starter-Kit" rel="noopener noreferrer"&gt;The DePIN Quickstart Guide for Builders&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;a href="https://helium.com/ecosystem/solana" rel="noopener noreferrer"&gt;Helium Network's Migration to Solana&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;a href="https://docs.hivemapper.com/" rel="noopener noreferrer"&gt;Hivemapper Docs&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;a href="https://rendernetwork.com/" rel="noopener noreferrer"&gt;Render Network&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;  &lt;a href="https://drive.google.com/file/d/15NFoNlCfB9naP21pjMl3z3C5NHll5ipk/view" rel="noopener noreferrer"&gt;EcoRydes Demo&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Browser Extension with OAuth 2.0 Authorization</title>
      <dc:creator>Nabeel Ahmed Khan</dc:creator>
      <pubDate>Mon, 11 May 2020 18:47:46 +0000</pubDate>
      <link>https://dev.to/n4beel/browser-extension-with-oauth-2-0-authorization-46l5</link>
      <guid>https://dev.to/n4beel/browser-extension-with-oauth-2-0-authorization-46l5</guid>
      <description>&lt;p&gt;It's not every day that you have to develop Browser Extensions and that too with the integration of OAuth 2.0 Authorization.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;" OAuth is an open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications. "&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Basically, OAuth provides a standard procedure through which Developers can get their third party apps authenticated through OAuth providers without handling any user auth info. It's a pretty simple and easy to implement procedure but can easily get complicated if the documentation provided by the Oauth Provider is not clear or if the developer is a newbie like me.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; This post can be helpful for anyone who is facing any problem regarding the implementation of OAuth procedure.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  How to do it
&lt;/h2&gt;

&lt;p&gt;For this procedure we are going to use a library called &lt;a href="https://github.com/whoisjuan/ChromeAuth2" rel="noopener noreferrer"&gt;ChromeAuth2&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fbrsm3bw70kmjqgc3dh9m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fbrsm3bw70kmjqgc3dh9m.png" alt="ChromeAuth2" width="800" height="366"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  1. Create your work directory with somewhat similar structure
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqxnc7ymg5owhn5ku3nrg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqxnc7ymg5owhn5ku3nrg.png" alt="Directory Structure" width="254" height="157"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;assets&lt;/strong&gt;: Contains all your images, styles and scripts&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;libs&lt;/strong&gt;  : Contains all your libraries&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;pages&lt;/strong&gt; : Contains all other &lt;code&gt;.html&lt;/code&gt; files&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;icon_128.png&lt;/strong&gt; : icon for chrome store&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;icon.png&lt;/strong&gt; : icon for toolbar&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;manifest.json&lt;/strong&gt; : Settings for the extension&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;popup.html&lt;/strong&gt; : main file of the extension&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  2. Add the following to your &lt;code&gt;manifest.json&lt;/code&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"manifest_version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Extension Name"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"description"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Extension's Description"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1.0.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"icons"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"128"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"icon_128.png"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"browser_action"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"default_icon"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"icon.png"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"default_popup"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"./popup.html"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"permissions"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"your OAuth provider's token API"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"tabs"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"storage"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;

    &lt;/span&gt;&lt;span class="nl"&gt;"content_scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="nl"&gt;"matches"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"https://redirect-ing.web.app/*"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="nl"&gt;"js"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"libs/chrome-ex-oauth2/injection.js"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="nl"&gt;"run_at"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"document_start"&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"web_accessible_resources"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"libs/*"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; Replace the first string in the permission's array with the access token's api provided to you by your OAuth provider, you don't need to change anything other than that.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  3. Add your application and API provider information to &lt;code&gt;libs/chrome-ex-auth/oauth2.js&lt;/code&gt;:
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;oauth2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

        &lt;span class="na"&gt;access_token_url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;{your-access-token-url}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;authorization_url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;{your-authorization-url}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;client_id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;{your-client-id}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;client_secret&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;{your-client-secret}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;redirect_url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;{your-redirect-url}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;scopes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="nx"&gt;your&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="k"&gt;of&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;scopes&lt;/span&gt;&lt;span class="p"&gt;}],&lt;/span&gt;

        &lt;span class="p"&gt;...&lt;/span&gt;
        &lt;span class="p"&gt;...&lt;/span&gt;

    &lt;span class="p"&gt;})();&lt;/span&gt;   
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; The provided function is only a boiler-plate. The variable names and the variables you pass to the Authorization API would be specific to your API provider. Some authorization APIs would require other parameters like &lt;code&gt;scope&lt;/code&gt; and &lt;code&gt;response-type&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;You would need to include those parameters in your initial variables and modify the &lt;code&gt;start()&lt;/code&gt; function to include the newly added parameters. You might also need to add some logic if you have an array of scopes or other array of values that need to be passed to the URL:&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;close&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
            &lt;span class="c1"&gt;// Modify this url depending on the parameters that your API providers requires you to pass.&lt;/span&gt;
            &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;authorization_url&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;?client_id=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;client_id&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;amp;redirect_uri=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;redirect_url&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;amp;response_type=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;response_type&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;amp;scope=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;scope&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="c1"&gt;// Use this logic to include several scopes.&lt;/span&gt;
            &lt;span class="c1"&gt;// for(var i in this.scopes) {&lt;/span&gt;
            &lt;span class="c1"&gt;//     url += this.scopes[i];&lt;/span&gt;
            &lt;span class="c1"&gt;// }&lt;/span&gt;
            &lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tabs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;active&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  4. Include the script to your &lt;code&gt;popup.html&lt;/code&gt; and invoke the authorization
&lt;/h4&gt;

&lt;p&gt;include the following script in your head tag:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"./libs/chrome-ex-oauth/oauth2.js"&lt;/span&gt; &lt;span class="na"&gt;defer&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"./assets/js/app.js"&lt;/span&gt; &lt;span class="na"&gt;defer&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    ...
    &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"authorize"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Authorize&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
    ...
  &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And, invoke the function from &lt;code&gt;assets/js/app.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;#authorize&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;oauth2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;start&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you can upload the extension to Chrome and test it out.&lt;/p&gt;

</description>
      <category>extension</category>
      <category>oauth</category>
      <category>authorization</category>
      <category>chrome</category>
    </item>
  </channel>
</rss>
