Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: added support for embedded chats #964

Closed
wants to merge 15 commits into from
Closed

fix: added support for embedded chats #964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
19be974
added iframe support
tlstommy Oct 18, 2023
2253db7
remove extra enter
tlstommy Oct 18, 2023
ccc0ef7
added conditional checks for iframe embeds
tlstommy Oct 21, 2023
716d8b3
linter fixes
tlstommy Oct 21, 2023
8b608e7
linter fixes
tlstommy Oct 21, 2023
4c3d9dc
linter fixes
tlstommy Oct 21, 2023
7b9e718
lint
tlstommy Oct 21, 2023
6fa6355
linter fixs
tlstommy Oct 21, 2023
449420c
fixed inject check for embeds
tlstommy Oct 31, 2023
e814881
linter fixes
tlstommy Oct 31, 2023
78f425b
Merge branch 'master' of https://github.com/tlstommy/Extension
tlstommy Nov 28, 2023
246c975
update nightly changelog
tlstommy Nov 28, 2023
1a9799b
Merge branch 'master' of https://github.com/tlstommy/Extension
tlstommy Dec 6, 2023
bc3734f
update changelog
tlstommy Dec 6, 2023
03c686f
Merge branch 'master' into master
tlstommy Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG-nightly.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
**The changes listed here are not assigned to an official release**.

- Reinstated animated avatars
- Added chat embed support

### 3.0.16.1000

Expand Down
1 change: 1 addition & 0 deletions manifest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export async function getManifest(opt: ManifestOptions): Promise<Manifest.WebExt
{
matches: ["*://*.twitch.tv/*"],
js: ["content.js"],
all_frames: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this force a reinstall of the extension?

Copy link
Author

@tlstommy tlstommy Feb 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, at least as far as I've seen with testing it locally. It just enables 7tv to detect and work in all twitch frames that aren't the top most frame (In this case it's the embedded iframe)

Is that what you're asking?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

No, I am unsure if this constitutes as a change that will uninstall everyone's extensions so I'm scared to make it.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah no it won't, at least it shouldn't.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should just auto update whenever the extension is updated like normal

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think, we wont fix this on this version and will wait for the rewrite due to be completed within the next few weeks.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, should I just resubmit a pr then or will you guys plan on adding this feature in?

},
],
options_ui: {
Expand Down
194 changes: 106 additions & 88 deletions src/content/content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,111 +1,129 @@
import { APP_BROADCAST_CHANNEL } from "@/common/Constant";
import { insertEmojiVectors } from "./emoji";

// Inject extension into site
const inject = () => {
// Script
const script = document.createElement("script");
script.src = import.meta.env.DEV ? import.meta.env.BASE_URL + "src/site/site.ts" : chrome.runtime.getURL("site.js");
script.id = "seventv-extension";
script.type = "module";
script.setAttribute("worker_url", chrome.runtime.getURL("worker.js"));
script.setAttribute("extension_origin", chrome.runtime.getURL(""));

// Style
if (!import.meta.env.DEV) {
const style = document.createElement("link");
style.rel = "stylesheet";
style.type = "text/css";
style.href = chrome.runtime.getURL("assets/" + import.meta.env.VITE_APP_STYLESHEET_NAME);
style.setAttribute("charset", "utf-8");
style.setAttribute("content", "text/html");
style.setAttribute("http-equiv", "content-type");
style.id = "seventv-stylesheet";

(document.head || document.documentElement).appendChild(style);
const shouldInject = () => {
//check if it is top-level window (not an iframe) OR a Twitch popout, allow injection
return (
window === window.top ||
window.location.href.startsWith("https://www.twitch.tv/popout/") ||
window.location.href.startsWith("https://www.twitch.tv/embed/")
);
};

(() => {
"use strict";

if (!shouldInject()) {
return;
}
// Inject extension into site
const inject = () => {
// Script
const script = document.createElement("script");
script.src = import.meta.env.DEV
? import.meta.env.BASE_URL + "src/site/site.ts"
: chrome.runtime.getURL("site.js");
script.id = "seventv-extension";
script.type = "module";
script.setAttribute("worker_url", chrome.runtime.getURL("worker.js"));
script.setAttribute("extension_origin", chrome.runtime.getURL(""));

(document.head || document.documentElement).appendChild(script);
// Style
if (!import.meta.env.DEV) {
const style = document.createElement("link");
style.rel = "stylesheet";
style.type = "text/css";
style.href = chrome.runtime.getURL("assets/" + import.meta.env.VITE_APP_STYLESHEET_NAME);
style.setAttribute("charset", "utf-8");
style.setAttribute("content", "text/html");
style.setAttribute("http-equiv", "content-type");
style.id = "seventv-stylesheet";

// Insert emojis
setTimeout(() => {
insertEmojiVectors();
}, 1e3);
};
(document.head || document.documentElement).appendChild(style);
}

const bc = new BroadcastChannel(APP_BROADCAST_CHANNEL);
(() => {
inject();
(document.head || document.documentElement).appendChild(script);

// Listen for requests to set up an extension permission
bc.addEventListener("message", (ev) => {
switch (ev.data.type) {
case "seventv-create-permission-listener": {
const { selector, id, origins, permissions } = ev.data.data as PermissionRequestEvent;
// Insert emojis
setTimeout(() => {
insertEmojiVectors();
}, 1e3);
};

const btn = document.querySelector<HTMLElement>(selector);
if (!btn) return;
const bc = new BroadcastChannel(APP_BROADCAST_CHANNEL);
(() => {
inject();

btn.addEventListener("switch", () => {
chrome.runtime.sendMessage(
{
type: "permission-request",
data: { id, origins, permissions },
},
{},
(response: { id: string; granted: boolean }) => {
if (!response) return;
// Listen for requests to set up an extension permission
bc.addEventListener("message", (ev) => {
switch (ev.data.type) {
case "seventv-create-permission-listener": {
const { selector, id, origins, permissions } = ev.data.data as PermissionRequestEvent;

const btn = document.querySelector<HTMLElement>(selector);
if (!btn) return;

btn.addEventListener("switch", () => {
chrome.runtime.sendMessage(
{
type: "permission-request",
data: { id, origins, permissions },
},
{},
(response: { id: string; granted: boolean }) => {
if (!response) return;

bc.postMessage({
type: "seventv-permission-granted",
data: { id: response.id, granted: response.granted },
});
},
);
});
break;
}
case "seventv-update-check": {
chrome.runtime.sendMessage(
{ type: "update-check" },
(response: { status: string; version: string }) => {
bc.postMessage({
type: "seventv-permission-granted",
data: { id: response.id, granted: response.granted },
type: "seventv-update-check-result",
data: { status: response.status, version: response.version },
});
},
);
});
break;
}
case "seventv-update-check": {
chrome.runtime.sendMessage(
{ type: "update-check" },
(response: { status: string; version: string }) => {
bc.postMessage({
type: "seventv-update-check-result",
data: { status: response.status, version: response.version },
});
},
);
}
}
}
});
});

chrome.runtime.onMessage.addListener((msg) => {
switch (msg.type) {
case "update-ready": {
onUpdateDownloaded(msg.data.version ?? "");
break;
chrome.runtime.onMessage.addListener((msg) => {
switch (msg.type) {
case "update-ready": {
onUpdateDownloaded(msg.data.version ?? "");
break;
}
case "settings-sync": {
onSettingsUpdated(msg.data.settings ?? []);
break;
}
}
case "settings-sync": {
onSettingsUpdated(msg.data.settings ?? []);
break;
}
}
});
})();
});
})();

function onUpdateDownloaded(version: string): void {
bc.postMessage({
type: "seventv-update-ready",
data: { version },
});
}
function onUpdateDownloaded(version: string): void {
bc.postMessage({
type: "seventv-update-ready",
data: { version },
});
}

function onSettingsUpdated(settings: SevenTV.Setting<SevenTV.SettingNode>[]): void {
bc.postMessage({
type: "seventv-settings-sync",
data: { nodes: settings },
});
}
function onSettingsUpdated(settings: SevenTV.Setting<SevenTV.SettingNode>[]): void {
bc.postMessage({
type: "seventv-settings-sync",
data: { nodes: settings },
});
}
})();

interface PermissionRequestEvent {
selector: string;
Expand Down