Hi again - its not going.
Has anyone got a good tutorial with the *BARE MINIMUM* code to get this thing going.
BOOK: Wheres spot by Eric Hill - see Spot Run, See Spot sit etc.
I do not want to read War & Peace with 1000's of pages and only need a handful of lines of code that i actually need..
Heres what i have so far
manifest.json
---------------------------------
{
"manifest_version": 3,
"name": "Ktest",
"version": "1.0",
"action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"activeTab",
"declarativeContent"
],
"background": {
"service_worker": "background.js"
}
}
----------------------------------
popup.html
---------------------
<!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" />
</head>
<body>
<template id="li_template">
<li>
<a>
<h3 class="title">Tab Title</h3>
<p class="pathname">Tab Pathname</p>
</a>
</li>
</template>
<h1>Google Dev Docs</h1>
<button>Group Tabs</button>
<ul></ul>
<script src="./popup.js" type="module"></script>
</body>
</html>
---------------------
background.js
-------------------------
console.log("Page location is " + window.location.href);
-------------------------
ERRORS RECEIVED with the above codes:
1) Service worker registration failed. Status code: 15
2) Uncaught ReferenceError: window is not defined
(Ive googled & cannot see anything with "service code 15" explanation.)
================================================
NOW - using the advice received so far in this thread:
https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-tabs-manager/popup.html
------------------------------------
<!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" />
</head>
<body>
<template id="li_template">
<li>
<a>
<h3 class="title">Tab Title</h3>
<p class="pathname">Tab Pathname</p>
</a>
</li>
</template>
<h1>Google Dev Docs</h1>
<button>Group Tabs</button>
<ul></ul>
<script src="./popup.js" type="module"></script>
</body>
</html>
------------------------------------
popup.js
-----------------------------------
const tabs = await chrome.tabs.query({
url: [
"https://*.
domain.com",
],
});
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));
const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
const element = template.content.firstElementChild.cloneNode(true);
const title = tab.title.split("-")[0].trim();
const pathname = new URL(tab.url).pathname.slice("/docs".length);
element.querySelector(".title").textContent = title;
element.querySelector(".pathname").textContent = pathname;
element.querySelector("a").addEventListener("click", async () => {
// need to focus window as well as the active tab
await chrome.tabs.update(
tab.id, { active: true });
await chrome.windows.update(tab.windowId, { focused: true });
});
elements.add(element);
}
document.querySelector("ul").append(...elements);
-----------------------------------
manifest.json
---------------------------------------
{
"manifest_version": 3,
"name": "K TRIPPER",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"action": {
"default_popup": "popup.html"
},
"permissions": [
"tabGroups"
]
}
---------------------------------------
PROBLEM:-
When I use these 3 files, I get No errors - YAY!!!!
However, when I open the app, on *ANY* URL, it says the same thing, It doesn't differentiate between URLS I want or the URLS I dont want.
All that is displayed on the screen are text, and a button(with text)
<h1>Google Dev Docs</h1>
<button>Group Tabs</button>
WHAT I WANT:- is a "See Spot Run" tutorial,
NO CSS - No HTML - No FONTS - No 1000's lines if code that is unexplained as to what it does
Yes.html (No HTML code of any kind - Just this one line - no HTML coding of any kind)
---------------
YES YOUR SCRIPT WORKS
---------------
No.html (No HTML code of any kind - Just this one line)
---------------
No The URL is incorrect - Go to the correct URL.
---------------
Is there a good tutorial with the bare minimum code to have yes.html if it matches http://*.
domain.com/ or no.html on any other URL.