Change to a page action instead of a browser action

joshka · Mar 10, 2023 · a61f1d7 · a61f1d7
1 parent 660357c
commit a61f1d7
Show file tree

Hide file tree

Showing 10 changed files with 339 additions and 25 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1 @@
+nodejs 18.15.0
diff --git a/src/Identity Icon Hover.svg b/src/Identity Icon Hover.svg
diff --git a/src/Info.svg b/src/Info.svg
diff --git a/src/Information.svg b/src/Information.svg
diff --git a/src/follow-user.js b/src/follow-user.js
@@ -1,5 +1,4 @@
 (() => {
-    const defaultServerUrl = 'https://mastodon.social';
     browser.storage.sync
         .get('serverUrl')
         .then((results) => results.serverUrl || defaultServerUrl)

diff --git a/src/manifest.json b/src/manifest.json
@@ -16,7 +16,9 @@
         }
     },
     "permissions": [
+        "<all_urls>",
         "activeTab",
+        "tabs",
         "storage",
         "identity"
     ],
@@ -29,5 +31,12 @@
         "page": "options.html",
         "browser_style": true,
         "chrome_style": true
+    },
+    "page_action": {
+        "browser_style": true,
+        "default_icon": "mastodon-logo-purple.svg",
+        "default_popup": "page-action.html",
+        "default_title": "Follow Mastodon User",
+        "show_matches": [ "https://*/@*" ]
     }
 }
diff --git a/src/mastodon-api.js b/src/mastodon-api.js
@@ -13,7 +13,7 @@ async function registerApp(serverUrl, redirectURL) {
         clientSecret: response.client_secret,
         appId: response.vapid_key
     };
-    console.log('Registered app', app);
+    console.log('Registered app', JSON.stringify(app));
     return app;
 }
 
@@ -51,35 +51,43 @@ async function getUserAccessToken(serverUrl, redirectURL, authCode, clientId, cl
     return token;
 }
 
-async function lookupAccount(serverUrl, acct) {
-    console.log('Looking up account', serverUrl, acct);
-    let lookupUrl = `${serverUrl}/api/v1/accounts/lookup`;
-    lookupUrl += `?acct=${encodeURIComponent(acct)}`;
-    lookupUrl += "&skip_webfinger=false";
-
-    let response = await getJson(lookupUrl, acct);
+async function verifyCredentials(serverUrl, token) {
+    console.log('Verifying credentials', serverUrl, token);
+    let verifyUrl = `${serverUrl}/api/v1/accounts/verify_credentials`;
+    let response = await getJson(verifyUrl, null, token);
     console.log(JSON.stringify(response));
     return response;
 }
 
-async function searchAccount(serverUrl, acct, token) {
-    console.log('Searching account', serverUrl, acct);
-    let lookupUrl = `${serverUrl}/api/v1/accounts/search`;
-    lookupUrl += `?q=${encodeURIComponent(acct)}`;
-    lookupUrl += "&resolve=true";
+// async function lookupAccount(serverUrl, acct) {
+//     console.log('Looking up account', serverUrl, acct);
+//     let lookupUrl = `${serverUrl}/api/v1/accounts/lookup`;
+//     lookupUrl += `?acct=${encodeURIComponent(acct)}`;
+//     lookupUrl += "&skip_webfinger=false";
 
-    let response = await getJson(lookupUrl, acct, token);
-    console.log(JSON.stringify(response));
-    return response;
-}
+//     let response = await getJson(lookupUrl, acct);
+//     console.log(JSON.stringify(response));
+//     return response;
+// }
 
-async function followAcccount(serverUrl, id, token) {
-    console.log('Following account', serverUrl, id, token);
-    let followUrl = `${serverUrl}/api/v1/accounts/${id}/follow`;
-    let response = await postJson(followUrl, id, token);
-    console.log(JSON.stringify(response));
-    return response;
-}
+// async function searchAccount(serverUrl, acct, token) {
+//     console.log('Searching account', serverUrl, acct);
+//     let lookupUrl = `${serverUrl}/api/v1/accounts/search`;
+//     lookupUrl += `?q=${encodeURIComponent(acct)}`;
+//     lookupUrl += "&resolve=true";
+
+//     let response = await getJson(lookupUrl, acct, token);
+//     console.log(JSON.stringify(response));
+//     return response;
+// }
+
+// async function followAcccount(serverUrl, id, token) {
+//     console.log('Following account', serverUrl, id, token);
+//     let followUrl = `${serverUrl}/api/v1/accounts/${id}/follow`;
+//     let response = await postJson(followUrl, id, token);
+//     console.log(JSON.stringify(response));
+//     return response;
+// }
 
 function postJson(url, data, token) {
     return fetchJson('POST', url, data, token);

diff --git a/src/page-action.css b/src/page-action.css
@@ -0,0 +1,14 @@
+.hidden {
+    display: none;
+}
+
+.panel-section-message {
+    flex-direction: column;
+    padding: 4px 0;
+}
+
+.panel-message-item {
+    padding: 4px 16px;
+    display: flex;
+    flex-direction:row;
+}
diff --git a/src/page-action.html b/src/page-action.html
@@ -0,0 +1,75 @@
+<!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">
+    <link rel="stylesheet" href="page-action.css">
+    <title>Follow Mastodon User</title>
+</head>
+<body>
+    <header class="panel-section panel-section-header">
+        <div class="text-section-header">
+            Follow Mastodon User
+        </div>
+    </header>
+
+    <section class="panel-section panel-section-message" id="not-logged-in">
+        <div class="panel-message-item">
+            Not logged in, visit extension options to login.
+        </div>
+        <div class="panel-message-item">
+            <button class="browser-style default" id="openOptionsPage">Open options page...</button>
+        </div>
+    </section>
+
+    <section class="panel-section panel-section-message hidden" id="logged-in">
+        <div class="panel-message-item">
+            Logged in as:&nbsp;<span id="myUsername"></span>
+        </div>
+        <div class="panel-message-item">
+            <button class="browser-style default" id="login">Open options page...</button>
+        </div>
+    </section>
+
+    <section class="panel-section panel-section-formElements hidden" id="actions">
+        <button class="browser-style hidden" id="follow">Follow</button>
+        <button class="browser-style hidden" id="unfollow">Unfollow</button>
+        <button class="browser-style hidden" id="mute">Mute</button>
+        <button class="browser-style hidden" id="unmute">Unmute</button>
+        <button class="browser-style hidden" id="block">Block</button>
+        <button class="browser-style hidden" id="unblock">Unblock</button>
+        <button class="browser-style hidden" id="report">Report</button>
+    </section>
+
+    <section class="panel-section panel-section-formElements hidden" id="debug-section">
+        <div class="panel-formElements-item">
+            <label for="debug-serverUrl">Server URL:</label>
+            <div class="text" id="debug-serverUrl"></div>
+        </div>
+        <div class="panel-formElements-item">
+            <label for="debug-accessToken">Access Token:</label>
+            <div class="text" id="debug-accessToken"></div>
+        </div>
+        <div class="panel-formElements-item">
+            <label for="debug-username">Username:</label>
+            <div class="text" id="debug-username"></div>
+        </div>
+        <div class="panel-formElements-item">
+            <label for="debug-account">Account:</label>
+            <div class="text" id="debug-account"></div>
+        </div>
+        <div class="panel-formElements-item">
+            <label for="debug-relationship">Relationship:</label>
+            <textarea id="debug-relationship" cols="50" rows="5"></textarea>
+        </div>
+        <div class="panel-formElements-item">
+            <label for="debug-text">Debug:</label>
+            <textarea id="debug-text" class="browser-style" cols="50" rows="5"></textarea>
+        </div>
+    </section>
+
+    <script src="mastodon-api.js"></script>
+    <script src="page-action.js"></script>
+</body>
+</html>