Gordon  Matlala

Gordon Matlala


ChatGPTBox: Integrating ChatGPT Into Your Browser Deeply

ChatGPT Box

Integrating ChatGPT into your browser deeply, everything you need is here.


(Waiting for store review, Chrome and Firefox version is now available)

✨ Features

  • 🌈 Call up the chat dialog box on any page at any time.
  • 🔗 Multiple API support (Web API for Free and Plus users, GPT-3.5, GPT-4).
  • 📦 Integration adaptation for various commonly used websites (reddit, quora, youtube, github, gitlab, stackoverflow, zhihu, bilibili). (Inspired by wimdenherder)
  • 🔍 Adaptation to all mainstream search engines, and custom queries to support additional sites.
  • 🧰 Selection tool and right-click menu to perform various tasks, such as translation, summarization, polishing, sentiment analysis, paragraph division, code explain and queries.
  • 🗂️ Static cards support floating chat boxes for multi-branch conversations.
  • 🖨️ Easily save your complete chat records or copy them partially.
  • 🎨 Powerful rendering support, whether for code highlighting or complex mathematical formulas.
  • 🌍 Language preference support.
  • 📝 Custom API address support.
  • ⚙️ All site adaptations and selection tools(bubble) can be freely switched on or off, disable modules you don't need.
  • 💡 Selection tools and site adaptation are easy to develop and extend, see the Development&Contributing section.
  • 😉 In addition, if there are any deficiencies in answers, just chat to correct.


Search Engine Adaptation, Floating Window, Conversation Branch


Integration with Commonly Used Websites, Selection Tools


Git Analysis, Right Click Menu


Video Summary


Mobile Effect





This project is based on my another repository josStorer/chatGPT-search-engine-extension

josStorer/chatGPT-search-engine-extension is forked from wong2/chat-gpt-google-extension(I learned a lot from that) and detached since 14 December of 2022

wong2/chat-gpt-google-extension is inspired by ZohaibAhmed/ChatGPT-Google (upstream-c54528b)

English | 简体中文

Download Details:

Author: josStorer
Source Code: https://github.com/josStorer/chatGPTBox 
License: MIT license

#chatgpt #chrome #extension #safari #firefox

ChatGPTBox: Integrating ChatGPT Into Your Browser Deeply

How to Uninstall Chrome in Ubuntu 22.04

How to Uninstall Chrome in Ubuntu 22.04

Google Chrome is the most popular web browser. It’s a cross-platform web browser that is developed by Google and is available for all the major platforms: Windows, Linux, macOS, iOS, Android, etc. It’s based on the open-source Chromium project.

In this guide, we will have a look at uninstalling Chrome in Ubuntu 22.04.

Google Chrome in Ubuntu

For Debian/Ubuntu, Google offers an installable DEB package. If installed, the package also configures the official Chrome repo for Debian/Ubuntu. Hence, we can use the APT package manager to uninstall Chrome.

The following guide demonstrates an in-depth discussion about installing Google Chrome in Ubuntu 22.04.

Note that Chrome and Chromium are different applications. Chrome is offered by Google that contains proprietary codes whereas Chromium is directly derived from the source code of the Chromium project.

Step 1: Finding the Chrome Packages

Check the existence of the Chrome package using the following command:

$ apt list --installed | grep google-chrome


Depending on the release channel, the package name is different:

  • Stable channel: google-chrome-stable
  • Unstable channel: google-chrome-unstable
  • Beta channel: google-chrome-beta

Step 2: Uninstalling Chrome

Now that we have the package names, we can use APT to uninstall them.

To uninstall the stable Chrome, run the following command:

$ sudo apt remove google-chrome-stable


To uninstall the unstable Chrome, use the following command instead:

sudo apt remove google-chrome-unstable

To uninstall the beta Chrome, use this command instead:

sudo apt remove google-chrome-beta


Alternatively, we can remove all the installed Google Chrome packages using the following command:

sudo apt remove google-chrome-*



Step 3: Removing the Chrome Repo

If you want to install Chrome in the future, it’s recommended to keep the Chrome repo as you can seamlessly install Chrome and get updates. However, there are ways to remove it.

First, we need to find where the Chrome repo is stored. There are two places where repo info is stored in Ubuntu:

  • /etc/apt/sources.list: The default file that APT uses to get the list of repos. Ideally, it should only contain the system repos.
  • /etc/apt/sources.list.d/: A directory that can contain the additional “.list” files. Ideally, third-party repo files should be stored here.

Instead of manually checking every single “.list” files under /etc/apt, we can use grep to automate the process:

$ grep -r "https://dl.google.com/linux/chrome/deb/" /etc/apt/*


If the entries are stored in their dedicated files, you can safely remove them. If the entries are part of a bigger file, you have to edit the files and manually remove the entries.

Chromium in Ubuntu

The Chromium browser is an open-source software that includes no proprietary web codes. Most Linux distros offer the Chromium browser directly from their official package repos. In the case of Ubuntu, however, Chromium is available as a snap package from Snapcraft.

The chromium-browser package from Ubuntu repos is a transitional package, not the actual program:

$ apt info chromium-browser


Step 1: Finding Chromium Snap

The first step is to verify the existence of the Chromium snap package. Check the list of the installed snap packages:

$ snap list | grep chromium


Note that snap uses different channels for the various Chromium releases:

  • Chromium stable: latest/stable
  • Chromium beta: latest/beta
  • Chromium candidate: latest/candidate
  • Chromium edge: latest/edge
snap info chromium


Uninstalling the Chromium snap removes the packages from all the channels as well.

Step 2: Uninstalling Chromium Snap

To uninstall the Chromium snap package, run the following command:

$ sudo snap remove chromium


Verify if the uninstallation is successful:

$ snap list



We demonstrated how to uninstall Chrome from Ubuntu 22.04. In addition, we discussed how to remove the Chrome repo from the system. This guide also showcased how to uninstall the Chromium browser from the system.

Not satisfied with Chromium/Chrome? There are plenty of web browsers to choose from. Check out the best web browsers of 2023 for Ubuntu.

Happy computing!


To follow this guide, you need the following components:

Original article source at: https://linuxhint.com/

#ubuntu #chrome 

How to Uninstall Chrome in Ubuntu 22.04
Lawrence  Lesch

Lawrence Lesch


Tabliss: A Beautiful, Customisable New Tab Page for Firefox, Chrome


A beautiful, customisable New Tab page for Firefox and Chrome.

Tabliss Screenshot



Install dependencies with npm install before running the following scripts.

  • npm run dev[:target] Local development server
  • npm run build[:target] Production build
  • npm run translations Manage translation files

To develop with external services you will additionally need to signup for your own API keys and enter them into your .env file. Get started by copying the example provided cp .env.example .env.


Checkout the guide to adding translations.

Download Details:

Author: joelshepherd
Source Code: https://github.com/joelshepherd/tabliss 
License: GPL-3.0 license

#typescript #chrome #extension 

Tabliss: A Beautiful, Customisable New Tab Page for Firefox, Chrome
Lawrence  Lesch

Lawrence Lesch


Figma-html: Figma to HTML, CSS, React, Vue, and more!

Builder.io for Figma: Figma to HTML, React, and more

Figma to HTML title

Convert Figma designs into high quality HTML, React, Vue, Svelte, Angular, Solid, etc code via Mitosis. Additionally, import sites to Figma as well!


How does it work

Export designs to code

  1. Install the plugin
  2. Ensure all layers you want to import use autolayout as described here
  3. Click the "get code" button to launch into the Builder.io editor
  4. Make any final adjustments, and click "get code" at the top of Builder to view code output, or copy and paste it to content of a Builder account to publish live

Import webpages to Figma designs

  1. Install the plugin
  2. In Figma, open a new or existing document, then hit cmd+/ and search "html figma" and hit enter
  3. Enter a URL you want to import


  • Instantly convert designs into live webpages and code
  • Easily import real live site styles for a starting point for designs and prototypes
  • Quickly turn real site components into design components
  • Easy import from storybook, etc

Chrome Extension

Want to capture a page behind an auth wall, or in a specific state you need to navigate to? Then the chrome extension is for you!

Using the library

// npm install @builder.io/html-to-figma
import { htmlToFigma } from "@builder.io/html-to-figma";
const layers = htmlToFigma(document.body);
// E.g. send these to the REST API, or generate a .figma.json file that can be uploaded through the Figma plugin

Auto-layout Vectors

When exporting Figma to Builder, the plugin requires all elements to be in auto-layout. However, it's not possible to auto-layout a vector. The alternative here is to use Figma's rasterize selection command on your vector. If the output of that is too low-resolution, then you can try this plugin: https://www.figma.com/community/plugin/837846252158418235/Flatten-Selection-to-Bitmap.

If you want the Builder end-result to have a vector, then consider this rasterized selection as a placeholder, and swap it back with an SVG in the Builder editor.


Importing HTML layers to Figma is a best-effort process. Even getting 90% there can save you a ton of time, only having to clean up a few things.

A few known limitations:

  • not all element types are supported (e.g. iframe, pseudoelements)
  • not all CSS properties are supported or fully supported
  • not all types of media are supported (video, animated gifs, etc)
  • all fonts have to be uploaded to Figma or a best effort fallback will be used

If you find any issues or have feedback at all please make an issue


  • Support code import from mitosis
  • Support Figma components

Made with ❤️ by Builder.io


  • builder.io/api/v1/html-to-figma: API endpoint that converts a URL's layout to a Figma design. The logic of that endpoint lives in this repo, under ./lib/html-to-figma.
  • builder.io/api/v1/figma-to-builder: API endpoint that converts a Figma design to a Builder content JSON. The logic of that endpoint lives in Builder's API.



Download Details:

Author: BuilderIO
Source Code: https://github.com/BuilderIO/figma-html 
License: MIT license

#typescript #react #chrome #extension #html #angular 

Figma-html: Figma to HTML, CSS, React, Vue, and more!
Hermann  Frami

Hermann Frami


Chromda: An AWS Lambda Function for Capturing Screenshots Of Websites

Chromda – Serverless screenshots

Chromda is an AWS Lambda function for serverless capturing screenshots of websites.

Multiple sources

  • SNS topics
  • SQS queues
  • CloudWatch scheduled events
  • API Gateway proxy


  • Capture full page, viewport or specific DOM element
  • Exclude DOM elements (useful for ads or other unwanted content)
  • Override styles

Quick start

Provided you already have AWS credentials for Serverless, do:

git clone https://github.com/luisfarzati/chromda
cd chromda
git submodule update --init
npm install

Edit the serverless.yml file and change the example bucket name with one of your own:

# serverless.yml
  s3Bucket: <your bucket name>

Deploy the function into your AWS account:

npm run deploy

Open the AWS Lambda Console and create the following test event:

  "source": "aws.events",
  "time": "1970-01-01T00:00:00Z",
  "detail": {
    "url": "https://www.nytimes.com"

Click Test, wait a few seconds (it might take around 8-10 secs), then you should see a response like:

  "url": "https://<your bucket name>.s3.amazonaws.com/<uuid>.png"



The function accepts different kind of events, extracting the data from the proper body attribute as follows:

EventBody is extracted from
SNS Message Event.Records[0].Sns.Message
SQS Message Event.Records[0].body
API Gateway Message Event.body
CloudWatch Events Message Event.detail


  // required
  "url": "https://google.com",

  // optional - valid options: page, viewport, element
  // default: viewport
  "capture": "page",

  // selector of element to capture
  // required if capture: element
  "selector": ".container",

  // optional - S3 key for the image file
  // default: uuid()
  "s3key": "test.png",

  // optional - selectors of elements to exclude
  "exclude": [".ad", "video"],

  // optional - styles to override
  // see Puppeteer.addStyleTag
  "styles": [
      "content": "body { color: #f00; }"

  // optional - puppeteer options
  "puppeteer": {
    // see Puppeteer.goto options
    "navigation": {
      "timeout": 30000,
      "waitUntil": ["domcontentloaded", "networkidle2"]
    // see Puppeteer.screenshot options
    "screenshot": {
      "type": "jpeg",
      "quality": 50,
      "omitBackground": false
    // viewport size, overrides env defaults
    "viewport": {
      "width": 1200,
      "height": 2000

Environment Variables



# serverless.yml

# ...
  s3Bucket: <your bucket name>

  # ...
    # Replace <version> with the latest version of chrome-aws-lambda-layer
    # It depends on the region you are deploying.
    # https://github.com/shelfio/chrome-aws-lambda-layer#available-regions
    - arn:aws:lambda:${self:provider.region}:764866452798:layer:chrome-aws-lambda:<version>

    # ...
      # configure the environment variables
      VIEWPORT_WIDTH: "1920"
      VIEWPORT_HEIGHT: "1200"
      # ...
      # add any of the supported event source(s) you want to use
      # the provided example uses SNS
      - sns:
          arn: !Ref chromdaTopic
          topicName: ${self:custom.snsTopic}

  # following the example, we provision an SNS topic
    Type: AWS::SNS::Topic
      TopicName: ${self:custom.snsTopic}


AWS X-Ray support is provided and there are segments for Puppeteer navigation and screenshot:

AWS X-Ray screenshot

Download Details:

Author: luisfarzati
Source Code: https://github.com/luisfarzati/chromda 
License: MIT license

#serverless #screenshot #puppeteer #chrome #headless 

Chromda: An AWS Lambda Function for Capturing Screenshots Of Websites
Hermann  Frami

Hermann Frami


Starter Kit for Running Headless-Chrome By Puppeteer on AWS Lambda

Puppeteer Lambda Starter Kit

Starter Kit for running Headless-Chrome by Puppeteer on AWS Lambda.

It can use alone and also supported Serverless Framework.


Use alone

This is simple and don't need IAM role but you have to deploy package by yourself. Don't worry, even if you will become to use Serverless in the future, what you should do for migration is little.

$ git clone -o starter-kit https://github.com/sambaiz/puppeteer-lambda-starter-kit.git your_project_name

Use with Serverless Framework

Serverless Framework can manage settings with CloudFormation and deploy.

$ serverless install --url https://github.com/sambaiz/puppeteer-lambda-starter-kit --name your_project_name

Run on local

By executing SLOWMO_MS=250 npm run local, you can check the operation while actually viewing the chrome (non-headless, slowmo).

Packaging & Deploy

Lambda's memory needs to be set to at least 384 MB, but the more memory, the better the performance of any operations.

512MB -> goto(youtube): 6.481s
1536MB -> goto(youtube): 2.154s

chrome in package (recommended)

If you use alone, run npm run package, and deploy the package.zip.

If you use with Serverless, run serverless deploy (this runs npm run package when packaging).

chrome NOT in package

Due to the large size of Chrome, it may exceed the Lambda package size limit (50MB) depending on the other module to include. In that case, put Chrome in S3 and download it at container startup so startup time will be longer.

Run npm run package-nochrome, deploy the package.zip, and set following env valiables on Lambda.

  • CHROME_BUCKET(required): S3 bucket where Chrome is put
  • CHROME_KEY(optional): S3 key. default: headless_shell.tar.gz

Build Headless-Chrome (optional)

This kit includes Chrome built by myself because official build Chrome installed by Puppeteer has problems about running on Lambda (missing shared library etc.).

If you want to use latest chrome, run chrome/buildChrome.sh on EC2 having at least 16GB memory and 30GB volume. See also serverless-chrome. Once you build it, link to headless_shell.tar.gz in chrome dir.


Lambda上でPuppeteer/Headless Chromeを動かすStarter Kitを作った - sambaiz-net

Download Details:

Author: Sambaiz
Source Code: https://github.com/sambaiz/puppeteer-lambda-starter-kit 
License: MIT license

#serverless #nodejs #lambda #chrome 

Starter Kit for Running Headless-Chrome By Puppeteer on AWS Lambda
Hermann  Frami

Hermann Frami


Testing-playground: Simple & complete DOM testing playground


Simple and complete DOM testing playground that encourage good testing practices.

online playground | next version

Playground for testing-library/dom

screenshot of unimported results

Testing-Library makes it easy to get started with testing. But even then, it can still be challenging to find the right queries or to understand why an element isn't being matched.

Testing-Playground provides you with direct feedback. Trying to visualize the direct impact of adding and removing specific (aria) attributes. All to give you some visual support while learning about the importance of aria roles, labels, and attributes.


Testing-Playground can also be embedded. There is are two embed modes. Manual integration, and oembed.


To get started with oembed, you'll simply need to copy / paste your direct playground links into a supporting platform.

Manual integration (demo)

Follow the following steps if you wish to have an interactive playground on your website.

Add the following snippet directly before your closing </body> tag:

<script async src="https://testing-playground.com/embed.js"></script>

Create a template element, in which you add to script tags. One for html and one for javascript. Make sure to type them correctly, as that's what our embedder uses to populate the different panes.

Note that the data-testing-playground attribute is required as well.

<template data-testing-playground>
  <script type="text/html"></script>

  <script type="text/javascript"></script>

Now, you can populate the html and javascript elements:

<template data-testing-playground>
  <script type="text/html">

  <script type="text/javascript">


To configure your playground even further, add one or more of the following attributes to your opening <template> tag. Note, don't remove the data-testing-playground attribute!

data-panes[markup | preview | query | result]['markup', 'preview', 'query', 'result']which panes to show, and in what order
data-heightnumber | string300height of the element
data-widthnumber | string'100% 'width of the element
data-loadingeager | lazy'lazy'load the frame eager or lazy (see iframe specs)

dynamic updates

Playground can be updated using cross-window messaging after it has been loaded. After the playground is loaded, you can update it with following message: {type: 'UPDATE_DATA', markup: 'new markup', query: 'new query'} with both markup and query being optional.

To find out, if playground is ready, you can listen for a message {source: 'embedded-testing-playground', type: 'READY'} in window from which are you embedding the playground.


<template data-testing-playground data-class="messaging-iframe"></template>
<script type="text/javascript">
  function updatePlayground() {
    const iframe = document.querySelector('.messaging-iframe');
      { type: 'UPDATE_DATA', markup: 'new markup', query: 'new query' },

  window.addEventListener('message', ({ data }) => {
    if (
      data.source === 'embedded-testing-playground' &&
      data.type === 'READY'
    ) {


Future ideas are maintained in roadmap.md. Please use the issue tracker to discuss any questions or suggestions you have.

Every section in the roadmap is accompanied by one or more issues. Contributions are most welcome!


Please see contributing.md for more details. If you just want to run the playground on your own machine, go to your terminal and enter the following commands:

git clone git@github.com:testing-library/testing-playground.git
cd testing-playground
npm ci
npm run start

Download Details:

Author: Testing-library
Source Code: https://github.com/testing-library/testing-playground 
License: MIT license

#serverless #nodejs #testing #chrome 

Testing-playground: Simple & complete DOM testing playground
Lawrence  Lesch

Lawrence Lesch


Lightproxy: Cross Platform Web Debugging Proxy


Cross Platform Web Debugging Proxy  

📦 Out-of-box, fully automation with certificate install & system proxy setting

🔋 Battery include, powerful hosts/proxy/capture based on whistle, what u need is just input /

🔌 Hackable, you could write even Node.js for your proxy rule

LightProxy - Open-source proxy tools for macOS & Windows based on whistle | Product Hunt Embed

Preview GIF


macOS Version Download

Windows Version Download

Quick Start

Take a quick start at: https://lightproxy.org/doc/getting-started

How to contribute


  • nodejs > 12 (important)
  • npm install -g electron-builder if you need bundle application


git clone https://github.com/alibaba/lightproxy
cd lightproxy
yarn run install-deps
yarn run dev

For new contributors you can try to fix a 🏅send-a-PR

Contributors ✨ 

ICBU 端架构团队招聘 ❤️ 如果你擅长端技术,热爱开源,追求极致的用户体验和开发者体验,欢迎发简历到 xcodebuild+lp@gmail.com

Download | Document | Contribute | Introduction | 介绍文章 | FAQ

Download Details:

Author: Alibaba
Source Code: https://github.com/alibaba/lightproxy 
License: Apache-2.0 license

#typescript #electron #chrome 

Lightproxy: Cross Platform Web Debugging Proxy
Hunter  Krajcik

Hunter Krajcik


Atomic-chrome: Edit Chrome Textareas in Atom

Atomic Chrome

Use Atom to edit in Chrome

atom-icon plus-icon chrome-icon


Github issue (textarea)


Gmail (contenteditable)



You need to install


Atom needs to be running for this to work.

  1. Focus a textarea or a contenteditable element
  2. Press the icon of Atomic Chrome (or the shortcut).

Note that the tab will open in the first launched instance of Atom.

How do I bind a shortcut

  1. Navigate to chrome://extensions
  2. Scroll to the bottom of the page
  3. Press 'Keyboard shortcuts'
  4. Set a shortcut for Atomic Chrome


This repository is for the Chrome plugin development. For the Atom package development, see https://github.com/tuvistavie/atomic-chrome-atom. Contributions are welcome.

Download Details:

Author: Danhper
Source Code: https://github.com/danhper/atomic-chrome 
License: MIT license

#atom #chrome #editing 

Atomic-chrome: Edit Chrome Textareas in Atom
Lawrence  Lesch

Lawrence Lesch


Memex: Browser extension to curate, annotate

WorldBrain's Memex

Memex Features

A browser extension to eliminate time spent bookmarking, retracing steps to recall an old webpage, or copy-pasting notes into scattered documents. Its name and functionalities are heavily inspired by Vannevar Bush's vision of a Memex. main_screen_new

Full-Text Search in Bookmarks:

Search with every word of all websites & PDFs you bookmarked, tagged, listed, or annotated. Filter by time, domain, list, or tags. 75158724-a8b7d500-570e-11ea-9d35-0255cb9ea2da.gif

Highlights, Notes & Annotations:

Add notes to websites as a whole and to individual components (e.g. text, images) 75158717-a3f32100-570e-11ea-901d-8241b0710d60.gif

Tags, Lists, Bookmarks

Add bookmarks, tags or sort websites into lists on the fly. 75158720-a786a800-570e-11ea-9891-0ef26f7066f3.gif

All Data Stored Locally

All personal data is stored and processed on your own computer and will never leave your computer without you either sharing, syncing or backing it up to an external cloud. For more details please see our privacy policy

Mobile Apps for iOS & Android + Encrypted Sync

With Memex Go you can save & organise content on the go. Sync is end2end encrypted with TweetNaCl


No VC Money, No Exit: Your Data & Attention Stays Yours

Memex is funded without VC money or selling shares. Instead we are funded with a model called "Steward Ownership". This model ensures that the company can never be sold and our investors are rewarded with a capped profit share. This way we will never be tempted by incentivizes to optimise our company for maximising growth and shareholder profits at the expense of your privacy, attention, or freed to choose a provider. You can find more about our choice in this post.


⛅ Backup and restore your data to any of your favorite cloud providers including Google Drive

📲 Import bookmarks and history from other services

⌨ Keyboard Shortcuts for everything

🗂 Tab manager: add all open tabs to a collection or tag

Changelog & Roadmap:

See a list of our past updates and upcoming features here.


Near term features where contributions are welcome

⭐️Archiving websites + reader mode + offline-viewing on mobile

⭐️Mobile Annotations

⭐️Support for Brave and Firefox on mobile

⭐️API to import/export your data & integrate with other apps

⭐️Bulk tag, delete, add to lists & bookmark of items

⭐️Nested Collections

Drop by in our team chat if you're interested in contributing to those features. Experience in React or React Native & Test Driven Development required

Bugs & Feature Requests

Head over to our community forums to post your requests.

Getting started as a developer

Click here for all instructions on how to build Memex so you can hack on it.


WorldBrain.io, the company behind Memex, has been funded by a set of courageous investors & grant givers. See a full & up-to-date list here.

Download Details:

Author: WorldBrain
Source Code: https://github.com/WorldBrain/Memex 
License: MIT licensed

#typescript #javascript #chrome #extension 

Memex: Browser extension to curate, annotate
Zara  Bryant

Zara Bryant


Create a Google Chrome Extension with Plasmo and React

In this tutorial, you'll learn how to use Plasmo to build a Chrome extension with React. Plasmo, a relatively new framework, helps to build chrome extensions with ease using React!

Chrome extensions are packed with features that are very handy for making your work a little easier. Plasmo, a relatively new framework, helps to build chrome extensions with ease using React!

Yes, that means you can use React’s component-based development to build Chrome extensions efficiently and fast! Sounds good, right?

In this article, we’ll be taking a look at how you can use Plasmo to build a Chrome extension with React.

Here’s what we’ll cover:

  1. Initialize a new Plasmo project
  2. Set-up Tailwind CSS
  3. Building the front-end
  4. Writing the logic
  5. Adding local storage support

To follow along, refer to this repo, and visit the Plasmo docs for more integration guides.

Initialize a new Plasmo project

Spin up the terminal, move to your project folder and initialize a new Plasmo project by doing the following:

npm x plasmo init

Or simply set up Plasmo with Next.js using this repo.

I’m a huge Next.js fan, hence I’ll be using it in this tutorial. Go ahead and install the following dependencies:

npm install next@latest

You will now have a similar setup to the following image:

Installing dependencies on Plasmo with Next.js

Some things to keep in mind while using Plasmo:

  • You are building a Chrome extension and not a web page. Static site regeneration is out of the equation, here
  • Everything is fetched on the client-side.
  • All the basic React functionalities should work as expected
  • Plasmo is still in its development stage, hence, there may be small bugs here and there
  • Next.js routing doesn’t work in Plasmo. (as a matter of fact, it’s not necessary, as routing in Next.js is known for the way it renders the page statically)
  • Your source code resides in the src directory

Next, let’s set up Tailwind CSS in the project.

Setting up Tailwind-CSS

Install the following dev dependencies required for Tailwind CSS:

npm install autoprefixer postcss tailwindcss --save-dev

Next up, run the init command to generate the tailwind.config.js and postcss.config.js files.

npx tailwindcss init -p

In the tailwind.config.js file, add the following path to the content property:

module.exports = {
  content: ["./**/*.{ts,tsx}"],
  theme: {
    extend: {}
  plugins: []

Then, create a new styles.css file and add the @tailwind directives to it.

@tailwind base;
@tailwind components;
@tailwind utilities;

With that done, add the import to this file in the ./src/components/main.tsx file.

import "../../style.css"

export function Main ({ name = "Extension" }) {...

(Note: If you ever get stuck, you can follow the Tailwind CSS integration guide for Next.js here)

Building out the frontend

With a little help from Tailwind CSS, let’s build out the frontend of our Chrome extension.

Let’s first make a layout for our Chrome extension that will wrap around the Main component.

Create a new file in ./src/components/layouts/Container.tsx:

function Container ({ children }) {
  return (

export default Container;

Let’s greet the user when they spin up the extension:

function greeting() {
  const time = new Date().getHours()
  if (time < 12) {
    return "Good Morning!"
  if (time < 18) {
    return "Good Afternoon!"
  return "Good Evening!"

Add this to the Container component as follows…

return (

…and a pinch of CSS

return (
      padding: "40px 20px",
      // add gradient
      background: "linear-gradient(to top, #BADBFB , #FFFFFF )"
    // body

Now, wrap this Container wrapper around main.tsx.

With that done, now let’s set up the development environment for Plasmo, so that you see your changes in real-time, just like how you would make changes to a website during development.

First, head to chrome://extensions and switch to Developer mode.

Developer mode in chrome

(Note: I’m using the Brave browser here, which uses the Chromium web browser under the hood, so the process will be the same for normal Chrome browsers, too.

Click on Load unpacked and go to your project directory, then select the build/chrome-mv3-dev folder. To view the extension, click on the puzzle logo near your Extensions section and select the Plasmo project.

(Note: If you get stuck, check out the Plasmo Docs here)

Your extension should now look something like this:

Viewing the extension on Plasmo

With that done, let’s set up the part for entering tasks and displaying them. In main.tsx, let’s add an input field for entering the tasks and a button for adding them.

To start with, add two states — one for capturing input from the text box, and the other one to keep track of the tasks.

import { useState } from "react";

export function Main ( ) {
  const [data, setData] = useState("");

  const [tasks, setTasks] = useState([]);

  return (

Now, inside Container, add the following:

return (
        className="rounded-md my-3 p-2 border-2 border-gray-300" 
        onChange={(e) => setData(e.target.value)} 
        placeholder="Add new task" 

If you now log data onto the console, you should be able to see the input data.

To inspect the application on Chrome DevTools, right-click on the desired extension:

Inspect App Chrome Dev Tools

With that done, let’s add a button for saving the state of the current tasks.

<button type="submit" onClick={submitHandler} className="button-blue">
  Add task

Make a new function for the onClick event:

function submitHandler () {
  // ...stuff

For now, we will simply log the current value of the data onto the console.

Next, let’s build the component to display the tasks. Make a new component called Tasks.tsx. As props, pass data, and setData — this will be useful while displaying the tasks and removing them.

In Tasks.tsx, for now, let’s just display a random list of tasks.

{data?.length !== 0 ? (
  data?.map((task, index) => (

        aria-label="Remove task"
        <TrashIcon className="w-10 h-10 pr-1" />
  ) : (
  <p className="mx-auto w-fit my-8">No tasks yet!</p>

(Note: To refer to the styles, visit this repo at GitHub. The icons used here are from react-icons)

You can add some dummy data for tasks and see if the component works as expected.

Writing the logic

Now, let’s add the basic functionality of adding and removing tasks.

First, let’s work on the submitHandler we defined earlier on the button. Whenever the user adds a task, we want the previous tasks to remain, and also to clear the input field.

async function submitHandler() {
  setTasks([...tasks, data]);

Now, in the Tasks.tsx, we have passed two props (namely the data and the setTasks function). The tasks should be displayed now whenever you add any new task.

Data and settasks functions display.

What’s remaining is the removeTask function, which is bound to the trash-icon in each task.

Inside the removeTask function:

function removeTask () {
      (task: string, i: number) => i !== index

What this piece of code basically does is filter through the data array containing the tasks and returns only the tasks that do not match the index of the task to be removed; then it sets the current tasks using the setTasks function.

Adding local storage support

Until now, we were able to enter new tasks and view them, but if you close the extension or hot-reload the development server, the tasks disappear. The best solution for this is adding local storage support to your extension.

Plasmo provides an in-built solution for this, called @plasmohq/storage. Install it using the following:

npm install @plasmohq/storage

We’ll fetch tasks from localStorage, if there are any present.

import { Storage } from "@plasmohq/storage";
import { useEffect } from "react";

const storage = new Storage();

export function Main () {
  // ...code

  useEffect(() => {
     // fetch tasks from the local storage
        (tasks) => setTasks(tasks || []),
        // if there are no tasks, set an empty array
        // this usually gets triggered if the method fails or returns an error
        () => setTasks([])
    // run once on mount

Inside the useEffect, we use the storage.get() method to check for any saved fields, with the field tasks. If tasks is present, we set the tasks state. We can even trigger another callback here if the promise is rejected, hence setting the tasks array as empty.

With that done, now we’ll add a task to local storage when the user clicks the submit button.

Inside the submitHanlder:

async function submitHanlder () {
  setTasks([...tasks, data]);

  // save to local storage
  await storage.set("tasks", [...tasks, data]);

Here, using the storage.set() method, the current list of tasks is fed into the localStorage under the key tasks.

With that done, the extension should now be able to persist tasks, even if the extension hot-reloads during development or if the extension is closed and re-opened.

Again, we can use the storage.set() method to remove the specific task.

Inside the removeTask() function, make the following changes:

function removeTask(index: number) {
  setTasks(data.filter((task: string, i: number) => i !== index));

  // remove from local storage
    data.filter((task: string, i: number) => i !== index)

The same logic we used previously is applied while removing the specific task from the localStorage.

(Note: To read more about @plasmohq/storage, visit the Plasmo Docs)

And, finally, we have successfully built an extension using React and Plasmo that can keep track of your tasks. You can add more new cool features of your own, and try to ship one to the Chrome Store!


Plasmo is a great framework to build extensions with; especially if you’re just starting out and have a bit of experience with React.

The documentation I have linked in this article is beginner-friendly and contains pretty much everything you need to get started with Plasmo.

Plasmo is still under active development, so be aware that you can encounter bugs and other problems. Make sure you join Plasmo’s official Discord Server if you are stuck anywhere or have any suggestions for upcoming versions, and of course feel free to leave your thoughts in the comments section below.

Original article source at https://blog.logrocket.com

#react #plasmo #chrome

Create a Google Chrome Extension with Plasmo and React
Lawrence  Lesch

Lawrence Lesch


Plasmo: The Browser Extension Framework

Plasmo Framework

The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers. Build your product and stop worrying about config files and the odd peculiarities of building browser extensions.

It's like Next.js for browser extensions!

CLI Demo


System Requirements

  • Node.js 16.x or later
  • MacOS, Windows, or Linux
  • (Strongly Recommended) pnpm


We have examples showcasing how one can use Plasmo with Firebase Authentication, Redux, Supabase authentication, Tailwind, and many more. To check them out, visit our examples repository.


Check out the documentation to get a more in-depth view into the Plasmo Framework.


pnpm create plasmo example-dir
cd example-dir
pnpm dev

The road ahead is filled with many turns.

  • Popup changes go in popup.tsx
  • Options page changes go in options.tsx
  • Content script changes go in content.ts
  • Background service worker changes go in background.ts


You can also organize these files in their own directories:

|   └───icon512.png
|   ├───index.tsx
|   └───button.tsx
|   ├───index.tsx
|   ├───utils.ts
|   └───input.tsx
|   ├───site-one.ts
|   ├───site-two.ts
|   └───site-three.ts

Finally, you can also avoid putting source code in your root directory by putting them in a src sub-directory, following this guide. Note that assets and other config files will still need to be in the root directory.


The Plasmo community can be found on Discord. This is the appropriate channel to get help with using the Plasmo Framework.

Our Code of Conduct applies to all Plasmo community channels.


Please see the contributing guidelines to learn more.


Plasmo is currently alpha software, and some things might change from version to version, so please be mindful and use it at your own risk.

English | 简体中文 | Tiếng Việt | Deutsch | French

Download Details:

Author: PlasmoHQ
Source Code: https://github.com/PlasmoHQ/plasmo 
License: MIT license

#typescript #chrome #extension #sdk 

Plasmo: The Browser Extension Framework
Hermann  Frami

Hermann Frami


Serverless-chrome: Run Headless Chrome/Chromium on AWS Lambda


Serverless Chrome contains everything you need to get started running headless Chrome on AWS Lambda (possibly Azure and GCP Functions soon).

The aim of this project is to provide the scaffolding for using Headless Chrome during a serverless function invocation. Serverless Chrome takes care of building and bundling the Chrome binaries and making sure Chrome is running when your serverless function executes. In addition, this project also provides a few example services for common patterns (e.g. taking a screenshot of a page, printing to PDF, some scraping, etc.)

Why? Because it's neat. It also opens up interesting possibilities for using the Chrome DevTools Protocol (and tools like Chromeless or Puppeteer) in serverless architectures and doing testing/CI, web-scraping, pre-rendering, etc.

Quick Start

"Bla bla bla! I just want to start coding!" No problem:

Using AWS Lambda, the quickest way to get started is with the Serverless-framework CLI.

First, install serverless globally (npm install -g serverless) and then:

serverless create -u https://github.com/adieuadieu/serverless-chrome/tree/master/examples/serverless-framework/aws

Then, you must configure your AWS credentials either by defining AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY environmental variables, or using an AWS profile. You can read more about this on the Serverless Credentials Guide.

In short, either:

export AWS_PROFILE=<your-profile-name>


export AWS_ACCESS_KEY_ID=<your-key-here>
export AWS_SECRET_ACCESS_KEY=<your-secret-key-here>

Then, to deploy the service and all of its functions:

npm run deploy

Further details are available in the Serverless Lambda example.

The Project

This project contains:


A collection of example functions for different providers and frameworks.


Serverless-framework Some simple functions for the Serverless-framework on AWS Lambda. It includes the following example functions:

  • Print to PDF
  • Capture Screenshot
  • Page-load Request Logger

Documentation & Resources

Building Headless Chrome/Chromium


Test with npm test. Each package also contains it's own integration tests which can be run with npm run test:integration.

Articles & Tutorials

A collection of articles and tutorials written by others on using serverless-chrome


Can't get Selenium / ChromeDriver to workMake sure that the versions of serverless-chrome, chromedriver, and Selenium are compatible. More details in [#133](https://github.com/adieuadieu/serverless-chrome/issues/133#issuecomment-382743975).



  1. Support for Google Cloud Functions
  2. Example for Apex
  3. Example for Claudia.js


  1. DOM manipulation and scraping example handler


  1. Support for Azure Functions
  2. Headless Firefox

Projects & Companies using serverless-chrome

Tell us about your project on the Wiki!

Change log



OMG. Yes. Plz, halp meeee.

Prior Art

This project was inspired in various ways by the following projects:

Download Details:

Author: Adieuadieu
Source Code: https://github.com/adieuadieu/serverless-chrome 
License: MIT license

#serverless #aws #lambda #chrome 

Serverless-chrome: Run Headless Chrome/Chromium on AWS Lambda
Monty  Boehm

Monty Boehm


Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

React Color

13 Different Pickers - Sketch, Photoshop, Chrome and many more

Make Your Own - Use the building block components to make your own



Live Demo

Installation & Usage

npm install react-color --save

Include the Component

import React from 'react'
import { SketchPicker } from 'react-color'

class Component extends React.Component {

  render() {
    return <SketchPicker />

You can import AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker SwatchesPicker TwitterPicker respectively.

100% inline styles via ReactCSS

Download Details:

Author: Casesandberg
Source Code: https://github.com/casesandberg/react-color 
License: MIT license

#sketch #react #chrome #photoshop 

Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

Develop Desktop GUI Applications using PHP, HTML5, JavaScript & SQLite

PHP Desktop


PHP Desktop is an open source project founded by Czarek Tomczak in 2012 to provide a way for developing native desktop GUI applications using web technologies such as PHP, HTML5, JavaScript and SQLite. Think of it as Electron for PHP. It is a convienient tool for converting PHP web apps and PHP CLI tools to desktop applications with little effort. The development workflow you are used to while creating web applications remains the same, there is no new framework / API to learn. The process of turning an existing website into a desktop application is basically a matter of copying it to the "phpdesktop/www/" directory.

In a certain sense phpdesktop acts as a PHP to EXE compiler. It embeds a web browser, a multi-threaded web server and a PHP interpreter. All embedded into a single application, a portable folder that you can easily distribute to end users by packing it to zip archive or by making an installer for your application. The web server embedded is a custom edition of Mongoose, a web server used by NASA on the International Space Station. Supported browsers are Internet Explorer and Google Chrome via open source Chromium. The package with Chrome embedded has no external dependencies, everything is included in phpdesktop binaries and works out of the box on a user's computer.

All popular PHP frameworks are supported, see the PHP frameworks support wiki page for example configurations for CakePHP, CodeIgniter, Laravel, Symfony, Yii and Zend Framework. You can create a standalone executable for distribution with the help of the Inno Setup installer. PHP sources can be protected with the many of the available PHP encoders. PHP Desktop is released under non-restrictive license, thus it is free for commercial use.

It is one of the top goals for PHP Desktop to be stable, to work reliably. PHP Desktop does not suffer from memory leaks. PHP by design was never intended for running long hours/days, as desktop applications usually do. This is not a concern when using PHP Desktop, as it is running an internal web server and serving pages through CGI. So when PHP script execution ends, PHP-CGI process is killed and all memory is always freed.

Lots of other useful information can be found on the Knowledge Base wiki page and on the PHP Desktop Forum.


There are two ways to be notified about new releases:

  • Watch the project with the "Releases only" option checked
  • Subscribe to the RSS/Atom feed


Fundings for new features

Here is a list of ongoing fundings for new features in PHP Desktop:

FeatureFunds gatheredIssueStatus
Chrome v100 release for Windows$890 of $2,000Issue #227Ongoing funding
Initial Mac release$2,000 of $2,000Issue #208Work started

Below is a list of completed fundings with features already implemented:

FeatureFunds gatheredIssueStatus
Initial Linux release$1,500 of $1,500Issue #221Done

Fundings for other features submitted in the issue tracker and the ones presented on the PHP Desktop Pro wiki page are also possible, just let know Czarek.

Support development

If you would like to support PHP Desktop general development efforts by making a donation please click the Donate button below:

Seeking sponsors

PHP Desktop is seeking companies to sponsor further development of the project. There are many proposals for new features submitted in the issue tracker and on wiki pages. Most notable are:

  • Monthly releases with latest Chrome
  • An automated build system
  • Cross-platform support with full functionality on Mac and Linux
  • More Javascript and PHP API exposed for accomplishing desktop specific tasks
  • Better integration with desktop, taskbar and systray
  • HTTPS/SSL support
  • Custom window themes
  • Running app in background
  • SQLite encryption
  • Desktop notifications

If your company would like to sponsor PHP Desktop development efforts then please contact Czarek. Long term sponsorships are welcome and Czarek is open to ideas about the project. He would love to spend more time on developing this project, but he can't afford doing so in his free time.

Download Details:

Author: cztomczak
Source Code: https://github.com/cztomczak/phpdesktop 

#php #chrome #framework #compiler 

Develop Desktop GUI Applications using PHP, HTML5, JavaScript & SQLite