DEV Community

Cover image for 👥 How to clone a website into a Chrome Extension.
Daniel Lima
Daniel Lima

Posted on

👥 How to clone a website into a Chrome Extension.

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/

Image description

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>
Ï
Enter fullscreen mode Exit fullscreen mode

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"
  }
}


Enter fullscreen mode Exit fullscreen mode

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.

Image description

If every things runs ok, you should see your extension like that:

Image description

Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github

Top comments (1)

Collapse
 
lukeberrypi profile image
Luke Berry

Excelente artigo! Bom saber que um projeto meu te levou a novas descobertas, essa sensação é incrível!

Obrigado por compartilhar!