mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
create a find example (#284)
* create a find example * update as per feedback
This commit is contained in:
Andy McKay
wbamberg
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"root": true,
|
"root": true,
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"ecmaVersion": 6
|
"ecmaVersion": 2017
|
||||||
},
|
},
|
||||||
"env": {
|
"env": {
|
||||||
"browser": true,
|
"browser": true,
|
||||||
|
|||||||
9
find-across-tabs/README.md
Normal file
9
find-across-tabs/README.md
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
## What it does
|
||||||
|
|
||||||
|
This extension searches across multiple tabs and calls find on each of those pages. If it finds the string, the string is highlighted.
|
||||||
|
|
||||||
|
## What it shows
|
||||||
|
|
||||||
|
How to use the tabs, find and sendMessage APIs.
|
||||||
|
|
||||||
|
Icon is from: http://bit.ly/2xyHiZv
|
||||||
36
find-across-tabs/background.js
Normal file
36
find-across-tabs/background.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
async function find(query) {
|
||||||
|
browser.runtime.sendMessage({msg: "clear-results"});
|
||||||
|
|
||||||
|
// If you don't exclude the current tab, every search will find a hit on the
|
||||||
|
// current page.
|
||||||
|
let this_tab_url = browser.runtime.getURL("find.html");
|
||||||
|
let tabs = await browser.tabs.query({});
|
||||||
|
|
||||||
|
for (let tab of tabs) {
|
||||||
|
// Iterate through the tabs, but exclude the current tab.
|
||||||
|
if (tab.url === this_tab_url) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call the find API on each tab. We'll wait for the results for each
|
||||||
|
// tab before progressing onto the next one by using await.
|
||||||
|
//
|
||||||
|
// After getting the results, send a message back to the query page
|
||||||
|
// and highlight the tab if any results are found.
|
||||||
|
let result = await browser.find.find(query, {tabId: tab.id});
|
||||||
|
browser.runtime.sendMessage({
|
||||||
|
msg: "found-result",
|
||||||
|
id: tab.id,
|
||||||
|
url: tab.url,
|
||||||
|
count: result.count
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result.count) {
|
||||||
|
browser.find.highlightResults({tabId: tab.id});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
browser.browserAction.onClicked.addListener(() => {
|
||||||
|
browser.tabs.create({"url": "/find.html"});
|
||||||
|
});
|
||||||
6
find-across-tabs/bootstrap.min.css
vendored
Normal file
6
find-across-tabs/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
26
find-across-tabs/find.html
Normal file
26
find-across-tabs/find.html
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="bootstrap.min.css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h3>Find across tabs</h3>
|
||||||
|
<p>Search across all the tabs and highlight the results in those tabs.</p>
|
||||||
|
<p><b>Please note</b>: this tab is excluded from the search.</p>
|
||||||
|
<form id="find-form">
|
||||||
|
<div class="form-group" id="form">
|
||||||
|
<input type="text" class="form-control" id="find-input" placeholder="Some text to find">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-default">Find</button>
|
||||||
|
</form>
|
||||||
|
<hr>
|
||||||
|
<h3>Results</h3>
|
||||||
|
<ul id="result-list">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<script src="find.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
find-across-tabs/find.js
Normal file
24
find-across-tabs/find.js
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
let backgroundPage = browser.extension.getBackgroundPage();
|
||||||
|
|
||||||
|
document.getElementById("find-form").addEventListener("submit", function(e) {
|
||||||
|
// Send the query from the form to the background page.
|
||||||
|
backgroundPage.find(document.getElementById("find-input").value);
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
let results = document.getElementById("result-list");
|
||||||
|
|
||||||
|
function handleMessage(request, sender, response) {
|
||||||
|
// Handle responses coming back from the background page.
|
||||||
|
if (request.msg === "clear-results") {
|
||||||
|
results.innerHTML = "";
|
||||||
|
}
|
||||||
|
if (request.msg === "found-result") {
|
||||||
|
// List out responses from the background page as they come in.
|
||||||
|
let li = document.createElement("li");
|
||||||
|
li.innerText = `Tab id: ${request.id} at url: ${request.url} had ${request.count} hits.`;
|
||||||
|
results.appendChild(li);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
browser.runtime.onMessage.addListener(handleMessage);
|
||||||
1
find-across-tabs/find.svg
Normal file
1
find-across-tabs/find.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 300 300" height="300px" id="Layer_1" version="1.1" viewBox="0 0 300 300" width="300px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M150.755,14.798c-74.554,0-134.994,60.441-134.994,134.999c0,74.562,60.44,135.001,134.994,135.001 c74.562,0,135.005-60.439,135.005-135.001C285.761,75.24,225.317,14.798,150.755,14.798z M150.755,265.708 c-64.01,0-115.912-51.897-115.912-115.911c0-64.013,51.902-115.908,115.912-115.908c64.018,0,115.912,51.895,115.912,115.908 C266.667,213.811,214.773,265.708,150.755,265.708z" fill="#D77E47"/><path d="M255.192,149.797c0,57.677-46.76,104.433-104.437,104.433S46.33,207.474,46.33,149.797 c0-57.674,46.748-104.428,104.425-104.428S255.192,92.123,255.192,149.797z" fill="#D77E47"/><path d="M172.602,86.568c-25.56,0-46.287,20.719-46.287,46.292c0,6.363,1.283,12.429,3.613,17.954l-47.301,42.181 l17.872,20.033l46.6-41.554c7.327,4.828,16.082,7.668,25.504,7.668c25.571,0,46.29-20.719,46.29-46.282 C218.892,107.295,198.173,86.568,172.602,86.568z M171.951,163.361c-16.207,0-29.337-13.133-29.337-29.338 c0-16.203,13.13-29.34,29.337-29.34c16.203,0,29.338,13.137,29.338,29.34C201.289,150.228,188.154,163.361,171.951,163.361z" fill="#FFFFFF"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
29
find-across-tabs/manifest.json
Normal file
29
find-across-tabs/manifest.json
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"description": "Find across all your tabs",
|
||||||
|
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/find-across-tabs",
|
||||||
|
"manifest_version": 2,
|
||||||
|
"name": "Find across tabs",
|
||||||
|
"permissions": [
|
||||||
|
"find",
|
||||||
|
"tabs"
|
||||||
|
],
|
||||||
|
"background": {
|
||||||
|
"scripts": ["background.js"]
|
||||||
|
},
|
||||||
|
"icons": {
|
||||||
|
"32": "find.svg"
|
||||||
|
},
|
||||||
|
"browser_action": {
|
||||||
|
"browser_style": true,
|
||||||
|
"default_title": "Find across tabs",
|
||||||
|
"default_icon": {
|
||||||
|
"32": "find.svg"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"version": "1.0",
|
||||||
|
"applications": {
|
||||||
|
"gecko": {
|
||||||
|
"strict_min_version": "57.0a1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user