felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-16 06:18:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

create a find example (#284)

Browse Source 
* create a find example

* update as per feedback
This commit is contained in:
Andy McKay
2017-09-21 16:58:49 -07:00
committed by wbamberg
parent 29345544c9
commit 3bea6540a9
8 changed files with 132 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@@ -1,7 +1,7 @@
{
"root": true,
"parserOptions": {
"ecmaVersion": 6
"ecmaVersion": 2017
},
"env": {
"browser": true,

9
find-across-tabs/README.md Normal file
View 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
View 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
View File

File diff suppressed because one or more lines are too long

26
find-across-tabs/find.html Normal file
View 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
View 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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

29
find-across-tabs/manifest.json Normal file
View 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"
}
}
}