ChatGPTBox: Integrating ChatGPT Into Your Browser Deeply

ChatGPT Box

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

Install

(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.

Preview

Search Engine Adaptation, Floating Window, Conversation Branch

Integration with Commonly Used Websites, Selection Tools

Git Analysis, Right Click Menu

Video Summary

Mobile Effect

Settings

Credit

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

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

Conclusion

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!

Prerequisites:

To follow this guide, you need the following components:

• A properly-configured Ubuntu system.
• Access to a non-root user with sudo privilege.

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

#ubuntu #chrome 

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

Tabliss

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

https://tabliss.io

Usage

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.

Translations

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 

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

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

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

Why?

• 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.

Limitations

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

TODO

• Support code import from mitosis
• Support Figma components
   

Made with ❤️ by Builder.io

Architecture

• 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.

DEVELOP

Read DEVELOP.md

Download Details:

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

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

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

Configurable

• 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
custom:
  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"
}

Usage

Invocation

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

Options

{
  // 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

Deploy

# serverless.yml

# ...
custom:
  s3Bucket: <your bucket name>

provider:
  # ...
  layers:
    # 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>

functions:
  captureScreenshot:
    # ...
    environment:
      # configure the environment variables
      VIEWPORT_WIDTH: "1920"
      VIEWPORT_HEIGHT: "1200"
      # ...
    events:
      # 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}

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

X-Ray

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

Download Details:

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

#serverless #screenshot #puppeteer #chrome #headless 

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.

Download

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.

Article

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 

Testing-playground: Simple & complete DOM testing playground

Testing-Playground

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

online playground | next version

Playground for testing-library/dom

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.

Embedding

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

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>
</template>

Now, you can populate the html and javascript elements:

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

  <script type="text/javascript">
    screen.getByRole('button');
  </script>
</template>

options

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!

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.

Example:

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

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

Roadmap

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!

Contributing

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 

Lightproxy: Cross Platform Web Debugging Proxy

Lightproxy

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

Preview GIF

Download

macOS Version Download

Windows Version Download

Quick Start

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

How to contribute

env

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

dev

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 

Atomic-chrome: Edit Chrome Textareas in Atom

Atomic Chrome

Use Atom to edit in Chrome

Screencast

Github issue (textarea)

Gmail (contenteditable)

Installation

You need to install

• The Chrome Plugin (Atomic Chrome from the Chrome Store)
• The Atom package (atomic-chrome from apm)

Usage

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

Development

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 

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.

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.

Highlights, Notes & Annotations:

Add notes to websites as a whole and to individual components (e.g. text, images)

Tags, Lists, Bookmarks

Add bookmarks, tags or sort websites into lists on the fly.

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.

Other:

⛅ 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.

Contributing

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.

Funders

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 

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:

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 (
    <div>{chidlren}</div>
  );
}

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 (
  <div>
    <div>
      <p>{greeting()}</p>
    </div>
    {children}
  </div>
)

…and a pinch of CSS

return (
  <div
    style={{
      padding: "40px 20px",
      // add gradient
      background: "linear-gradient(to top, #BADBFB , #FFFFFF )"
    }}
  >
    // body
  </div>
);

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.

(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:

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 (
    <Container>
      {...stuff}
    </Container>
  )
}

Now, inside Container, add the following:

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

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:

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
</button>

Make a new function for the onClick event:

function submitHandler () {
  // ...stuff
  console.log(data);
}

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) => (
    <div
      className={...styles}
      key={index}
    >
      <p>{task}</p>

      <button
        aria-label="Remove task"
        type="button"
        <TrashIcon className="w-10 h-10 pr-1" />
      </button>
    </div>
  ))
  ) : (
  <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]);
  setData("");
}

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.

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

Inside the removeTask function:

function removeTask () {
  setTasks(
    data.filter(
      (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
      storage.get("tasks").then(
        (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]);
  setData("");

  // 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
  storage.set(
    "tasks",
    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!

Conclusion

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

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!

Features

• First-class React + Typescript Support
• Declarative development
• Content Scripts UI
• Tab Pages
• Live-reloading + React HMR
• .env* files
• Targeting multiple browser and manifest pairs
• Remote code bundling (e.g for gtag4)
• Automated deployment via BPP
• Optional support for Svelte and Vue
• And many, many more! 🚀

System Requirements

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

Examples

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.

Documentation

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

Usage

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

Directories

You can also organize these files in their own directories:

ext-dir
├───assets
|   └───icon512.png
├───popup
|   ├───index.tsx
|   └───button.tsx
├───options
|   ├───index.tsx
|   ├───utils.ts
|   └───input.tsx
├───contents
|   ├───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.

Community

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.

Contributing

Please see the contributing guidelines to learn more.

Disclaimer

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 

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

Serverless-chrome

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>

or

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:

• @serverless-chrome/lambda NPM package
  A standalone module for AWS Lambda which bundles and launches Headless Chrome with support for local development. For use with—but not limited to—tools like Apex, Claudia.js, SAM Local, or Serverless.
• serverless-plugin-chrome NPM package
  A plugin for Serverless-framework services which takes care of everything for you. You just write the code to drive Chrome.
• Example functions
  • Serverless-framework AWS Lambda Node.js functions using serverless-plugin-chrome
• Build Automation & CI/CD
  Build and release tooling shell scripts and Dockerfile for automating the build/release of headless Chrome for serverless environments (AWS Lambda).

Examples

A collection of example functions for different providers and frameworks.

Serverless-framework

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

• Automated, regularly prebuilt binaries can be found on the Releases page 😎
• adieuadieu/headless-chromium-for-aws-lambda Docker image
• Documentation on building your own binaries
• Medium article on how to do build from scratch. This was the origin of this project.

Testing

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

• AWS DevOps Blog — UI Testing at Scale with AWS Lambda
• Running puppeteer and headless chrome on AWS lambda with Serverless
• Will it blend? Or how to run Google Chrome in AWS Lambda
• Running Selenium and Headless Chrome on AWS Lambda
• AWS Lambda上のheadless chromeをPythonで動かす
• AWS Lambda上でpuppeteerを動かして、スクレイピングする
• serverless-chrome で日本語を表示できるようにする

Troubleshooting

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).

Roadmap

1.1

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

1.2

1. DOM manipulation and scraping example handler

Future

1. Support for Azure Functions
2. Headless Firefox

Projects & Companies using serverless-chrome

Tell us about your project on the Wiki!

Change log

See the CHANGELOG

Contributing

OMG. Yes. Plz, halp meeee.

Prior Art

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

• PhantomJS
• wkhtmltopdf
• node-webkitgtk
• electron-pdf

Download Details:

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

#serverless #aws #lambda #chrome 

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

Demo

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 

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

PHP Desktop

Introduction

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.

Downloads

• Windows
  • PHP Desktop v57.0 for Windows release
  • PHP Desktop MSIE v1.14 wiki page
• Linux
  • PHP Desktop v72.1 for Linux release
• Mac
  • No release yet, see the ongoing funding in Issue #208

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

Support

• Documentation is on the Wiki Pages. Start with the Knowledge Base, Settings and Chrome settings wiki pages.
• Ask questions and report problems on the PHP Desktop Forum
• See also this externally maintained tutorial: Create your first Desktop Application with PHP and PHP Desktop

Fundings for new features

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

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

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