I am building a simple chrome extension that when initially downloaded will request a phone number through a text box in the popup.html. However, after the initial download is completed and a phone number is given, I want to show a seperate html which shows something else. I am not totally sure how to achieve this. I have a default popup in my manifest.json, but how do I change that after installation. I am aware chrome extensions have chrome.runtime.onInstalled, but I am not sure if that is what I need. I have attached my manifest.json, popup.html, and listener for my popup.html.
Manifest.json
{
"manifest_version": 2,
"name": "Top Shot Notifications",
"version": "0.1.0",
"description": "Lateral blog post demo extension",
"permissions": [
"tabs", "https://www.google.com/*",
"storage"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
popup.html
<!DOCTYPE html>
<html>
<div style="padding: 20px 20px 20px 20px;">
<h3>Hello,</h3>
<p>Please enter your phone number: </p>
<input id="phone_number" />
<button id="start" type="button">START</button>
<script type="text/javascript" src="popup.js"></script>
</div>
</html>
popup.js
function startScripts() {
var phone_number = document.getElementById('phone_number').value;
chrome.storage.local.set({ phone_number: phone_number});
chrome.tabs.executeScript({
file: 'content.js'
});
}
document.getElementById('start').addEventListener('click', startScripts);