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.
If every things runs ok, you should see your extension like that:
Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github
Top comments (1)
Excelente artigo! Bom saber que um projeto meu te levou a novas descobertas, essa sensação é incrível!
Obrigado por compartilhar!