Как установить расширение web 3
Перейти к содержимому

Как установить расширение web 3

  • автор:

How to Create a Web3 Chrome Extension

Web3, often referred to as the decentralized internet, is a set of protocols and technologies that enable applications on the blockchain. This guide aims to walk you through the process of creating a Web3-enabled Chrome extension. By the end, you will be able to create a Chrome extension that can view the balance of an address on the blockchain.

What You Will Need​

  • Basic understanding of Ethereum
  • A QuickNode Endpoint (you can create one for free here)
  • A Google Chrome Browser
  • A Code Editor (e.g., VSCode)
Dependency Version
copy-webpack-plugin ^11.0.0
webpack ^5.88.2
webpack-cli ^5.1.4

What You Will Do​

  • Learn about Google Chrome Extensions
  • Create a Web3 Chrome Extension
  • Test the Web3 Chrome Extension by fetching the Ether balance of an address

Google Chrome Extensions​

A Chrome extension is a small software program that customizes and enhances the functionality of the Chrome browser. They are written using standard web technologies like HTML, CSS, and JavaScript.

Popular Web3 Chrome extensions today consist of:

  • Wallets: These are non-custodial wallets that allow users to manage their cryptocurrencies directly from their browsers without entrusting their keys to a third party. Prominent examples are MetaMask (widely used for Ethereum and Ethereum-compatible chains), Phantom (popular for the Solana ecosystem), and Solflare (another choice for Solana users).
  • Gas Estimators: Given the fluctuating nature of transaction costs on blockchain networks, gas estimator extensions offer users real-time insights into the current gas prices, helping them make informed decisions about when to send transactions. Extensions like ‘ETH Gas Price’ are invaluable to users who want to optimize their transaction costs on the Ethereum network.
  • Trackers: These extensions are dedicated to providing real-time price information about various cryptocurrencies. Price trackers like Crypto Price Tracker or CoinMarketCap’s extension give users quick access to current cryptocurrency valuations without having to visit specific websites.

Privacy Requirements

Given the financial nature of many Web3 applications, ensuring user privacy is crucial. Developers should:

  • Use encrypted connections (HTTPS) when communicating with external services.
  • Store sensitive data, like private keys, securely and never in plain text.
  • Only request essential permissions to reduce the potential attack surface.
  • Clearly inform users about any data collection and adhere to data protection regulations like GDPR or CCPA.
  • Regularly audit and update the extension to address potential vulnerabilities.

Preview the Chrome Extension You’ll Build​

The Chrome extension we build will look and function as below:

Chrome Extension Preview

Note that this guide will only show you local development of the Chrome extension without publishing it to the Chrome store.

Ready? Let’s get to building!

Create a QuickNode Endpoint​

In order to communicate with the Ethereum network, we’ll need access to an RPC endpoint. Instead of running our own node and managing its infrastructure, we’ll leave the heavy lifting to QuickNode. QuickNode provides up to 8x faster response times. You can create a free account here.

Once logged in, select Create an Endpoint and select the Ethereum Mainnet blockchain. Once created, keep the HTTP Provider URL handy, as you’ll need it in the following section.

QuickNode Endpoint

Create the Web3 Chrome Extension​

We’ll begin by setting up our project folder with all the required files. In your terminal window, run the following commands to create a folder with its necessary files:

mkdir web3-chrome-ext cd web3-chrome-ext npm init --y mkdir src && mkdir static echo > webpack.config.js cd src && echo > popup.js && echo > serviceWorker.js cd .. cd static && echo > popup.html && echo > manifest.json cd .. 

Let’s also install the required dependencies:

npm i webpack webpack-cli copy-webpack-plugin 

Then, we’ll open up the manifest.json file and input the following configuration:

  "manifest_version": 3, "name": "Web3 Extension", "version": "1", "description": "Web3 Extension to view Ether balances on Ethereum", "action":   "default_popup": "popup.html" > > 

Let’s recap the file above.

Every chrome extension requires a JSON-formatted file called manifest.json, this file sets important information about our chrome extension, such as the version , description , and action (which defines that we want rendered). Without this file, we won’t be able to compile our chrome extension successfully.

Note: We did not include an icon for our chrome extension; however, if you would like to include one, you would add an icons object to the file above. Additionally, you would need to place the image icon into your project folder and reference the path properly. Since we are not including an icon in our project folder, a generic icon would be created.

Now, to configure our frontend UI, open the static/popup.html file and input the following code:

DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Ethereum Balance Viewertitle> style> body   font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; width: 300px; >  input, button   width: 100%; padding: 10px; margin-top: 10px; box-sizing: border-box; border: 1px solid #aaa; border-radius: 4px; font-size: 16px; >  button   background-color: #333; color: #fff; cursor: pointer; transition: background 0.3s; >  button:hover   background-color: #555; >  #result   margin-top: 15px; font-weight: bold; color: #333; > style> head> body> div> input type="text" id="ethAddress" placeholder="Enter Ethereum Address"> button id="fetchBalance">Fetch Balancebutton> div> div id="result">div> script src="popup.bundle.js"> script> body> html> 

To configure the backend logic for the UI, open the src/popup.js file and input the following code:

document.getElementById('fetchBalance').addEventListener('click', function()   var address = document.getElementById('ethAddress').value; if (address)   getBalance(address); > else   document.getElementById('result').innerText = 'Please enter an Ethereum address'; > >);  function getBalance(address)   var myHeaders = new Headers();  myHeaders.append("Content-Type", "application/json");  var raw = JSON.stringify(  "method": "eth_getBalance", "params": [address, "latest"], "id": 1, "jsonrpc": "2.0" >);  var requestOptions =   method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' >;  fetch("YOUR_QUICKNODE_ENDPOINT", requestOptions) .then(response => response.json()) .then(data =>   if (data.result)   var balanceInEther = parseInt(data.result, 16) / 1e18; var balanceFixed = balanceInEther.toFixed(2) document.getElementById('result').innerText = `Balance: $balanceFixed> ETH`; > else   document.getElementById('result').innerText = 'Error fetching balance'; > >) .catch(error =>   document.getElementById('result').innerText = 'Error fetching balance'; console.log('error', error); >); > 

In the file above, replace the YOUR_QUICKNODE_ENDPOINT placeholder with your actual QuickNode Provider HTTP URL you created previously. If you were to bring this chrome extension to production, you would not want to expose your private endpoint and would instead use a server-side pattern that handles requests to the API. Your chrome extension would send requests to your server (like a proxy), and your server would then add the necessary API credentials and forward that request to the API provider. This way, your API key resides only on your server and is never exposed to the client-side.

Let’s recap the code above before moving on.

We first define an event listener for a button (i.e., fetchBalance ) which we’ll update once an ether balance is retrieved. Then, we define a function getBalance that makes a eth_getBalance RPC POST request via our QuickNode endpoint. eth_getBalance is an RPC method supported by Ethereum nodes. If the RPC request succeeds and returns a valid balance, it converts the balance from Wei to Ether and displays it in an element with ID result . If there’s an error during fetch, an error message is shown.

Next, we’ll configure the webpack.config.js file. This file will contain the configuration for Webpack in order for it bundle up our JavaScript and HTML code. Open the file and input the following code:

const path = require("path"); const CopyWebpackPLugin = require("copy-webpack-plugin") module.exports =   entry:   popup: "./src/popup.js", serviceWorker: "./src/serviceWorker.js" >, output:   filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') >, devtool: 'source-map', mode: 'development', watch: true, plugins: [ new CopyWebpackPLugin(  patterns: [from: 'static'>] >) ] > 

Remember to save all the files before moving on!

Next, within your project’s main directory, open your terminal window and run the following command:

npx webpack build 

This will bundle the files in our src & static folder and create a new folder called dist , which we’ll upload to the Extensions page.

Given that the command above was successful, now let’s test it in Chrome.

  • 1. Go to the Extensions page by entering chrome://extensions in a new tab. (By design chrome:// URLs are not linkable.)
  • 2. Enable Developer Mode by clicking the toggle switch next to Developer mode.

Enable Developer Mode

  • 3. Click the Load unpacked button and select the dist directory within your web3-chrome-ext project folder.

You should see the Extension load up on the screen. You can pin it by clicking the puzzle icon to the right of your Google search bar. Once pinned, click the Extension, and you should see the below:

Chrome Extension Preview

Put in an Ethereum address, and click the button to see its Ether balance. Try this address — 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 (hint it’s Vitalik’s) as an example. After fetching the balance, you’ll see:

Chrome Extension Preview

Up until this point, we showcased how to build a simple Chrome extension that can fetch Ether balances of an address. I challenge you to take it further and update the script to show balances of not just Ether but other ERC-20 tokens and potentially other NFTs!

Wrap Up​

You’ve successfully built a Web3 Chrome Extension that interacts with the Ethereum blockchain. If you want to open this chrome extension to the public, you’ll need to create a Google Developer Account. Also, remember to prioritize user privacy and security in your application by securing your API credentials and not storing sensitive user information.

If you have any questions, check out the QuickNode Forum for help. Stay up to date with the latest by following us on Twitter (@QuickNode) or Discord.

We ❤️ Feedback!

Let us know if you have any feedback or requests for new topics. We’d love to hear from you.

MetaMask Legacy Web3 от danfinlay, rekmarks

Предпросмотр MetaMask Legacy Web3

The MetaMask extension provides an API to websites you visit so they can interact with the blockchain. In the past, we used to provide a complementary API known as window.web3. As of December 2020, we stopped injecting window.web3, which improves security and performance, but can break older and unmaintained websites. Using this extension in combination with the MetaMask wallet enables you to use those older sites as before.

Комментарии разработчика
Оцените работу расширения
РазрешенияПодробнее

Этому дополнению нужно:

  • Получать доступ к вашим данных на всех сайтах

Больше сведений

  • Страница поддержки
  • Эл. почта поддержки
  • Веб-разработка
  • Другое
  • Просмотреть все версии

Web3 Decode Extension для Google Chrome

Декодируйте транзакции web3 легко с помощью расширения Web3 Decode. Этот инструмент необходим для раскрытия сложностей запросов Web3 непосредственно в инструментах разработчика вашего браузера. Независимо от того, являетесь ли вы разработчиком Ethereum, энтузиастом блокчейна или просто интересуетесь децентрализованными приложениями, это расширение предлагает безпрепятственный мониторинг и декодирование активности Web3.

Получайте мгновенные инсайты во все запросы Web3, сделанные приложениями. Погружайтесь в специфику запросов, такие как вызовы методов, параметры и данные ответов, через интуитивный интерфейс, интегрированный в инструменты разработчика вашего браузера. Установка проста — добавьте расширение из Chrome Web Store без каких-либо сложных конфигураций. Улучшайте свое понимание приложений Ethereum, оптимизируйте свой рабочий процесс разработки и оставайтесь в курсе изменяющегося ландшафта Web3, установив расширение Web3 Decode.

Расширение внедрения Web3

Концепция Web3, темпы ее принятия и перспективы на будущее уже почти десятилетие являются предметом обсуждения ведущих средств массовой информации, аналитиков и членов интернет-сообщества. Но прежде чем углубиться в тему принятия Web3, стоит углубиться в историю Интернета, чтобы получить представление о том, как отрасль в целом достигла того, что она имеет сегодня.

Краткая история Интернета и как он попал в Web3

Многие не знали, что Интернет существовал еще в 1960-х годах, когда правительственные исследователи использовали его для обмена информацией. Но Интернет в том виде, в каком мы его знаем, переживает четвертое десятилетие своей эволюции, официально зародившись в 1983 году после создания TCP/IP (протокола управления передачей/межсетевого протокола).

Попутно Интернет претерпел метаморфозы, пройдя три фазы , обычно известные как Web 1.0, Web 2.0 и Web 3.0.

Web 1.0 (с 1980-х по 2000 год) часто называют первой стадией Интернета и характеризовался статическими веб-страницами, пользовательскими страницами, созданными компаниями для целевой аудитории, и баннерным маркетингом. Создателей контента практически не существовало, а доступ в Интернет стоил очень дорого.

Web 2.0 (с 2000 по 2010 год и продолжается сегодня) был тем, когда был придуман термин «Всемирная паутина», и доступ в Интернет стал дешевле, что привело к тому, что его конечные пользователи, наконец, стали создателями контента. Появилось взаимодействие между пользователями, а также платформы социальных сетей Facebook, YouTube и Twitter.

Web 3.0 (2010 и более поздние версии) — это то, где мы находимся сегодня с приложениями для мобильных телефонов с искусственным интеллектом, 3D-графикой и технологией блокчейн. Что касается последнего, Web 3.0 включает в себя концепции децентрализации, экономики на основе токенов и монетизации цифрового контента.

Прогнозируется, что к 2026/27 году количество пользователей блокчейна и криптографии достигнет 1 миллиарда.

С момента запуска Биткойна в 2009 году пространство блокчейна и криптовалюты быстро росло, что привело некоторых аналитиков и наблюдателей к выводу, что он следует темпам распространения Интернета в 90-х годах.

Например, в конце 2021 года член криптосообщества Ларк Дэвис опубликовал в Твиттере диаграмму, показывающую рост числа пользователей на Coinbase в период с 2014 по конец 2021 года. Затем он наложил график на график, показывающий количество пользователей Интернета с 1990 по 1998 год.

Эти два графика казались неразличимыми, и если скорость внедрения Интернета использовалась в качестве ориентира для прогнозирования распространения криптографии и блокчейна, последняя отрасль могла иметь 1 миллиард пользователей в следующие пять лет: 2026–2027 годы.

Точно так же популярный биткойн-аналитик Вилли Ву в начале 2021 года также указал, что у Биткойна примерно столько же пользователей, сколько у Интернета в 1997 году. Он также добавил, что глобальные пользователи биткойнов могут достичь 1 миллиарда человек в следующие четыре года эквивалент интернет-пользователей в 2005 году.

Мы все еще находимся на ранних стадиях Web3

Таким образом, можно сделать вывод, что кривая внедрения Интернета является подходящим методом измерения того, куда движется Web3.

Кроме того, используя анализ Вилли Ву о том, что текущий уровень принятия Биткойна аналогичен уровню Интернета в 2005 году, можно также сказать, что мы все еще находимся в начале игры примерно на 17–20 лет.

На момент написания около 5 миллиардов человек пользуются Интернетом по сравнению с примерно 70 миллионами в 1997 году. Если подсчитать, то использование цифровых активов и Web3 вполне может вырасти в 70 раз в следующие 17 лет, чтобы достичь нынешние 5 миллиардов интернет-пользователей.

CryptoKitties, вероятно, ускорили рост Web3

Часто говорят, что «снежки становятся больше и движутся быстрее, когда катятся с холма». Это утверждение подходит как перчатка для описания степени принятия как раннего Интернета, так и Web3.

Не так давно (2017 г.) CryptoKitties попали в заголовки газет из-за перегрузки сети Ethereum и резкого роста платы за газ ETH по сравнению со спросом на виртуальных кошек. Пять лет спустя популярность невзаимозаменяемых токенов (NFT) выросла подобно упомянутому выше эффекту снежного кома, и все говорят о них, если не создают цифровые предметы коллекционирования или не торгуют ими.

Учреждения прыгают на подножку NFT

В частности, в этом году NFT захватили мир штурмом, поскольку такие проекты, как CryptoPunks, MeeBits, DeGods и Bored Ape Yacht Club, и это лишь некоторые из них, привлекли внимание розничных трейдеров, знаменитостей, спортсменов и даже традиционных учреждений и предприятий.

На прошлой неделе Starbucks объявила , что вскоре войдет в пространство Web3, запустив собственную коллекцию NFT, нацеленную на создание цифрового «третьего места», где члены сообщества могли бы чувствовать себя как дома и в то же время общаться за чашечкой кофе.

Starbucks признала, что технологии Web3, такие как NFT, могут помочь компании лучше общаться с молодыми людьми. Кроме того, NFT «может также обеспечить способ создания дополнительного трафика и доходов не только с точки зрения розничной торговли, но и дополнительного дохода в результате собственного бизнеса».

Другие основные компании, которые внедрили технологии NFT и Web3 или планируют это сделать, включают Instagram , глобального инвестиционного менеджера VanEck , NBA, Time Magazine, Adidas, Lamborghini, Gucci, Samsung, Pepsi, McDonald’s и даже Playboy Magazine.

Децентрализованные финансы также привлекают учреждения

Институциональное участие в Web3 также не ограничивается NFT, поскольку такие организации также используют децентрализованные финансы.

Недавно протокол DeFi Aave запустил службу разрешенного кредитования и ликвидности Aave Arc, специально разработанную для учреждений, чтобы участвовать в децентрализованном финансировании, соответствующем нормативным требованиям. На момент запуска в белом списке Aave Arc было 30 объектов, включая Anubi Digital, Canvas Digital, CoinShares, GSR и агрегатор криптодоходности Celsius.

Точно так же в конце апреля 2022 года компания Fireblocks, занимающаяся хранением криптовалют, начала поддерживать DeFi on Terra (LUNA) как первую и единственную платформу, предоставляющую доступ институционального уровня к Dapps в конкретной цепочке блоков. На момент официального объявления Fireblocks 0,5 миллиарда долларов было переведено в DeFi на Terra упомянутыми выше организациями, причем половина этой суммы, 250 миллионов долларов, была развернута в течение первых 72 часов.

Еще одним примером организаций, использующих Web3, является Tesla, которая завершила раунд финансирования на 7,8 миллиона долларов , финансируемый через MakerVault. Последний является «основным компонентом протокола маркеров, который облегчает создание DAI против заблокированного залога». Собранные средства пойдут на оплату нового ремонтно-аварийного центра Tesla.

Цель OMNIA во вселенной Web3

Как упоминалось ранее, Web3 находится на ранней стадии внедрения. До сих пор существует пресловутый хаос и проблемы безопасности, которые бросают вызов Интернету сегодня, как это было на различных этапах его эволюции (Web 1.0, Web 2.0 и Web 3.0).

Пользователи Web3 часто становились жертвами хакерских атак (например, на Axie Infinity ) и занимали лидирующие позиции на децентрализованных биржах и во время торговли NFT . Такие атаки заставили пользователей Web3 задуматься о своей конфиденциальности вне сети и в сети .

Протокол OMNIA — это протокол децентрализованной инфраструктуры, который помогает предотвратить единые точки отказа в блокчейне за счет оптимизации конфиденциальности и вознаграждения поставщиков инфраструктуры. Протокол обеспечивает конфиденциальность для своих пользователей и увеличивает надежность своей сети, стимулируя операторов узлов запускать необходимую инфраструктуру.

OMNIA использует смешанные сети и частные мемпулы для обеспечения конфиденциальности вне сети, тем самым защищая своих пользователей от атак с опережением и других типов атак, вызванных утечкой личной информации вне сети, такой как IP-адреса и метаданные транзакций.

О протоколе OMNIA

Предвидя состояние текущей сети приложений блокчейна, мы взяли на себя обязательство подготовить, исследовать и применить наш технический опыт в нашем последнем проекте OMNIA.

Протокол OMNIA — это децентрализованный инфраструктурный протокол для безопасного доступа к блокчейну, чтобы ни одна точка отказа никогда не нарушала работу блокчейн-приложений или интегрируемых с ним кошельков.

Решение OMNIA действительно децентрализовано и не требует технических знаний. Таким образом, все пользователи могут настроить свои узлы с минимальными затратами времени и усилий. Узнайте больше о технологическом чуде, лежащем в основе OMNIA, подписавшись на нашу среду Medium или прочитав наш технический документ .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *