👥 How to clone a website into a Chrome Extension.

#javascript #webdev #tutorial #chrome

This is a simple tutorial to how clone a website into a chrome extension .

Full repo : https://github.com/bolodissenoura/chrome-extension

Actually is not a real clone, we will reproduce the hole website if a iframe tag and show it on a google extension.

There are some reasons to you do it. But today i will clone a real open-source project called Phived.

Phived is a dead-simple, anti-procrastination to-do list. you can have up to 5 tasks at a time. to add more tasks, complete some of your ongoing ones. no login, no cookies, no images and no ads.

Phived website: https://www.phived.com/

Let's start

Step 1# - Create a folder

mkdir my-extension

Step 2# - Create a `128.png` file as your logo

Create a 128p by 128p logo for your app.
In the app folder, save the file as 128.png.

Step 3# - Create a `Popup.html` file

At the src you should put your website.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Phived</title>
  </head>
  <body>
    <iframe
      src="https://www.phived.com/"
      style="
        overflow: auto;
        height: 500px;
        width: 500px;
      "
      title="W3Schools Free Online Web Tutorials"></iframe>
  </body>
</html>
Ï

Step 4# - Create a `manifest.json` file


{
  "manifest_version": 2,
  "name": "phived",
  "version": "1.0.0",
  "icons": {
    "128": "128.png"
  },
  "description": "Anti-procrastination to-do list. you can have up to 5 tasks at a time. to add more tasks, complete some of your ongoing ones. no login, no cookies, no images and no ads.",
  "content_scripts": [{ "matches": ["<all_urls>"], "js": ["Content.js"] }],
  "browser_action": {
    "default_popup": "Popup.html",
    "default_title": "phived"
  }
}

Step 5# - Run and test

Save the app or extension folder on your test device.
Go to chrome://extensions/.
At the top right, turn on Developer mode.
Click Load unpacked.
Find and select the app or extension folder.
Open a new tab in Chromeand thenclick Appsand thenclick the app or extension. Make sure it loads and works correctly. If needed, make changes in the manifest.json file, host the app folder, and retest it. Repeat until the app or extension works correctly.