Fix Threads dynamic post discovery

src/content/definition-engine.ts

@@ -75,8 +75,12 @@ export class DefinitionEngine {
 
   private extractText(post: Element): string {
     for (const selector of this.definition.post.textSelectors) {
-      const content = post.matches(selector) ? post : post.querySelector(selector);
-      if (content) return visibleText(content, this.definition.post.excludedSelectors ?? []);
+      const matches = Array.from(post.querySelectorAll(selector));
+      const contents = post.matches(selector) ? [post, ...matches] : matches;
+      for (const content of contents) {
+        const text = visibleText(content, this.definition.post.excludedSelectors ?? []);
+        if (text) return text;
+      }
     }
     return "";
   }

src/content/definitions/default.json

@@ -26,11 +26,11 @@
         "https://threads.net/*",
         "https://www.threads.net/*"
       ],
-      "requiredSelectors": ["[data-pressable-container=\"true\"], [role=\"article\"], article"],
+      "requiredSelectors": ["[role=\"article\"], article"],
       "post": {
-        "rootSelectors": ["[data-pressable-container=\"true\"]", "[role=\"article\"]", "article"],
-        "textSelectors": ["span[dir=\"auto\"]:not(a span):not(time span):not([role=\"button\"] span)"],
-        "excludedSelectors": ["button", "[role=\"button\"]", "time", "svg"],
+        "rootSelectors": ["[role=\"article\"]", "article"],
+        "textSelectors": ["span[dir=\"auto\"]"],
+        "excludedSelectors": ["button", "[role=\"button\"]", "time", "svg", "a span", "time span", "[role=\"button\"] span"],
         "permalinkSelectors": ["a[href*=\"/post/\"]"]
       }
     }

src/options/main.ts

@@ -46,6 +46,7 @@ addSubscriptionButton?.addEventListener("click", async () => {
 refreshSubscriptionsButton?.addEventListener("click", async () => {
   try {
     const response = await chrome.runtime.sendMessage({ type: "REFRESH_SUBSCRIPTIONS" });
+    if (!response) throw new Error("The background page did not respond. Reload the extension and try again.");
     if (response?.error) throw new Error(response.error);
     currentSettings = response.settings;
     renderSubscriptions(currentSettings);

tests/definition-engine.test.ts

@@ -61,6 +61,21 @@ describe("DefinitionEngine", () => {
     expect(observed).toContain("content warning revealed text");
   });
 
+  it("discovers Threads posts appended after observation starts", async () => {
+    document.body.innerHTML = '<main><div role="article"><span dir="auto">Initial post</span></div></main>';
+    const threads = BUILTIN_DEFINITIONS.find((candidate) => candidate.id === "threads")!;
+    const engine = new DefinitionEngine(threads);
+    const observed: string[] = [];
+    const stop = engine.observe((posts) => observed.push(...posts.map((post) => post.text)));
+    const post = document.createElement("div");
+    post.setAttribute("role", "article");
+    post.innerHTML = '<span dir="auto">Scrolled-in post</span>';
+    document.querySelector("main")?.append(post);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    stop();
+    expect(observed).toContain("scrolled-in post");
+  });
+
   it("discovers Threads posts from stable semantic/data selectors and permalink IDs", () => {
     document.body.innerHTML = readFileSync("tests/fixtures/threads-feed.html", "utf8");
     const threads = BUILTIN_DEFINITIONS.find((candidate) => candidate.id === "threads")!;
@@ -71,7 +86,7 @@ describe("DefinitionEngine", () => {
 
   it("selects Threads on current and legacy domains", () => {
     const threads = BUILTIN_DEFINITIONS.find((candidate) => candidate.id === "threads")!;
-    document.body.innerHTML = '<div data-pressable-container="true"></div>';
+    document.body.innerHTML = '<div role="article" data-pressable-container="true"></div>';
     for (const url of ["https://threads.com/home", "https://www.threads.com/@alice/post/ABC123", "https://threads.net/home", "https://www.threads.net/@alice/post/ABC123"]) {
       expect(selectDefinition([threads], url)).toBe(threads);
     }

tests/fixtures/threads-feed.html

@@ -1,5 +1,5 @@
 <main>
-  <div data-pressable-container="true">
+  <div role="article" data-pressable-container="true">
     <a href="/@alice"><span dir="auto">alice</span></a>
     <a href="/@alice/post/ABC123"><time><span dir="auto">12h</span></time></a>
     <span dir="auto">First Threads post with <span>visible text</span></span>