DEV Community

Cover image for πŸ‘₯ How to clone a website into a Chrome Extension.
Daniel Lima
Daniel Lima

Posted on

5 1 2 1 2

πŸ‘₯ 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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

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!

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay