Work with x.com

README.md

@@ -22,7 +22,7 @@
 
 ## Features
 
-Pin Tweet to IPFS is a [web extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) targetting less-technical users who wish to archive Tweets in a verifiable way. It uses [IPFS](https://ipfs.tech/), [WebRecorder](https://webrecorder.net/), and [web3.storage](https://web3.storage/) to achieve this.
+Pin Tweet to IPFS is a [web extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) targetting less-technical users who wish to archive Tweets (or "Xeets") in a verifiable way. It uses [IPFS](https://ipfs.tech/), [WebRecorder](https://webrecorder.net/), and [web3.storage](https://web3.storage/) to achieve this.
 
 ## How does it work?
 
@@ -49,7 +49,7 @@ Basic functionality can be achieved in a bookmarklet
 
 ```js
 javascript:(function(){
-  const url = document.location.href.match(/https:\/\/twitter.com\/(\w){1,15}\/status\/(\d)*/)[0];
+  const url = document.location.href.match(/https:\/\/x.com\/(\w){1,15}\/status\/(\d)*/)[0];
   if (url) window.open(`https://webrecorder.github.io/save-tweet-now/#url=${url}&autoupload=1`);
 })();
 ```

esbuild.js

@@ -7,8 +7,8 @@ import cpy from "cpy";
 import { deleteSync } from "del";
 import esbuild from "esbuild";
 
-import pkg from "./package.json" assert { type: "json" };
-import manifest from "./src/manifest.json" assert { type: "json" };
+import pkg from "./package.json" with { type: "json" };
+import manifest from "./src/manifest.json" with { type: "json" };
 
 // delete old contents of build/ if exists
 deleteSync(["build/**"]);

src/Popup/index.jsx

@@ -12,7 +12,7 @@ function main() {
 
   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
     const currentTab = tabs[0] // there will be only one in this array
-      const tweetUrlMatch = currentTab.url.match(/https:\/\/twitter.com\/(\w){1,15}\/status\/(\d)*/)
+      const tweetUrlMatch = currentTab.url.match(/https:\/\/(twitter|x).com\/(\w){1,15}\/status\/(\d)*/)
     if (tweetUrlMatch) {
       const url = tweetUrlMatch[0]
       root.render(<Popup />)

src/background.js

@@ -51,7 +51,7 @@ function init () {
     title: 'Pin Tweet to IPFS',
     contexts: ['link'],
     id: `pin-tweet-to-ipfs-${new Date().toISOString()}`, // unique id to avoid errors
-    targetUrlPatterns: ['https://twitter.com/*/status/*']
+    targetUrlPatterns: ['https://x.com/*/status/*']
   })
 
   chrome.contextMenus.onClicked.addListener((info) => archiveTweet(info.linkUrl))

src/content.js

@@ -26,7 +26,7 @@ function onMutation (mutations) {
     chrome.runtime.sendMessage({ url: tweetUrl })
   }
 
-  const createButton = () => {
+  const createButton = (small = false) => {
     // Icon svg
     const parser = new DOMParser()
     const logo = parser.parseFromString(iconLogo, 'image/svg+xml')
@@ -41,7 +41,8 @@ function onMutation (mutations) {
 
     const pinTweetButton = document.createElement('button')
     pinTweetButton.appendChild(pinTweetButton.ownerDocument.importNode(logo.documentElement, true))
-    pinTweetButton.appendChild(label)
+    if (!small)
+      pinTweetButton.appendChild(label)
     pinTweetButton.style.display = 'flex'
     pinTweetButton.style.backgroundColor = 'rgb(104 131 149)'
     pinTweetButton.style.color = '#fff'
@@ -51,9 +52,10 @@ function onMutation (mutations) {
     pinTweetButton.style.letterSpacing = '0.5px'
     pinTweetButton.style.padding = '5px 10px'
     pinTweetButton.style.cursor = 'pointer'
-    pinTweetButton.style.minWidth = '165px'
+    pinTweetButton.style.minWidth = small ? '' : '165px'
     pinTweetButton.addEventListener('click', (e) => getTweetUrl(e))
     pinTweetButton.id = `pin-tweet-${new Date().toISOString()}`
+    pinTweetButton.title = 'Pin Tweet to IPFS'
     return pinTweetButton
   }
 
@@ -67,7 +69,8 @@ function onMutation (mutations) {
           .apply(node.querySelectorAll("[role='group']"))
           .filter(
             (node) =>
-              !node.hasAttribute('aria-label') &&
+              node.ariaLabel &&
+              node.ariaLabel.includes('view') &&
               node.id &&
               !found.includes(node)
           )
@@ -77,7 +80,7 @@ function onMutation (mutations) {
           .apply(node.querySelectorAll('[aria-label]'))
           .filter(
             (node) =>
-              node.ariaLabel.includes('eplies') &&
+              node.ariaLabel.includes('view') &&
               node.id &&
               !found.includes(node)
           )
@@ -88,6 +91,6 @@ function onMutation (mutations) {
 
   found.forEach((n) => {
     if (n.querySelector("[id^='pin-tweet']")) return // return early if there is already a button appended
-    n.appendChild(createButton())
+    n.appendChild(createButton(n.offsetWidth < 165 * 2))
   })
 }

src/manifest.json

@@ -17,7 +17,8 @@
   "content_scripts": [
     {
       "matches": [
-        "https://*.twitter.com/*",
+        "https://*.x.com/*",
+        "https://x.com/*",
         "https://webrecorder.github.io/save-tweet-now/"
       ],
       "js": ["content.js"]