feat: toolbar popup to suggest new alternatives

This commit is contained in:
Mitesh Shah 2020-09-13 19:43:23 +05:30
parent bde303215c
commit 7decb2a39f
3 changed files with 94 additions and 1 deletions

View File

@ -11,7 +11,7 @@
}
},
"description": "This extension looks at your current URL, and recommends BETTER product/service alternatives via an in-page pop-up.",
"permissions": ["storage"],
"permissions": ["storage", "tabs"],
"background": {
"scripts": ["background.js"],
"persistent": false
@ -27,5 +27,10 @@
"page": "options.html",
"open_in_tab": false
},
"browser_action": {
"default_icon": "images/48.png",
"default_title": "Better",
"default_popup": "toolbar/popup.html"
},
"web_accessible_resources": ["defaultlist.json", "lists/*"]
}

49
toolbar/popup.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="choose_beast.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container" style="max-width: 420px">
<div class="row">
<div class="col">
<h2 class="font-weight-bold">Better</h2>
<p class="lead">Suggest an alternative service for this URL</p>
<div class="alert alert-info" id="currentURL"></div>
<form action="" method="GET" id="betterForm">
<div class="form-group">
<label for="basic-url">Better Name</label>
<div class="input-group mb-3">
<input type="text" id="betterName" name="betterName" class="form-control" id="basic-url">
</div>
</div>
<div class="form-group">
<label for="basic-url">Better URL</label>
<div class="input-group mb-3">
<input type="url" id="betterURL" name="betterURL" class="form-control" id="basic-url">
</div>
</div>
<div class="form-group">
<label for="basic-url">Better description</label>
<div class="input-group mb-3">
<input type="text" id="betterDescription" name="betterDescription" class="form-control" id="basic-url">
</div>
</div>
<button class="btn btn-warning font-weight-bold" id="suggestionSubmit">Submit suggestion</button>
</form>
<p class="text-muted">This will take you to a GitHub issue page</p>
</div>
</div>
</div>
<div id="error-content" class="hidden">
</div>
<script src="popup.js"></script>
</body>
</html>

39
toolbar/popup.js Normal file
View File

@ -0,0 +1,39 @@
let currentURL = document.getElementById("currentURL");
chrome.tabs.query(
{
active: true,
currentWindow: true,
},
function (tabs) {
var tabURL = tabs[0].url;
currentURL.textContent = tabURL;
}
);
let betterForm = document.getElementById("betterForm");
let betterName = document.getElementById("betterName");
let betterURL = document.getElementById("betterURL");
let betterDescription = document.getElementById("betterDescription");
function encodeQueryData(data) {
const ret = [];
for (let d in data)
ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
return ret.join("&");
}
var submitSuggestion = function () {
const data = {
title: `Suggestion: ${currentURL.textContent}`,
body: `${betterURL.value}\n${betterName.value}\n${betterDescription.value}`,
};
const queryString = encodeQueryData(data);
let suggestionUrl = `https://github.com/nileshtrivedi/better/issues/new?${queryString}`;
chrome.tabs.create({ url: suggestionUrl });
};
betterForm.addEventListener("submit", function (e) {
e.preventDefault();
submitSuggestion();
});