Migrate to Manifest V3

Makefile

@@ -1,2 +1,2 @@
 all:
-	zip -r ../Send-to-Telegram-Chrome-extension.zip ./*
+	zip -r ../send-to-telegram.zip ./*

README.md

@@ -1,40 +1,46 @@
 # Send-to-Telegram for Google Chrome
 
-[![visitors](https://visitor-badge.glitch.me/badge?page_id=phguo.Send-to-Telegram-Chrome-extension)](https://github.com/phguo/Send-to-Telegram-Chrome-extension) [![Chrome Web Store](https://img.shields.io/chrome-web-store/users/dgblfklicldlbclahclbkeiacpiiancc?color=brightgreen&logo=google-chrome)](https://chrome.google.com/webstore/detail/send-to-telegram-for-goog/dgblfklicldlbclahclbkeiacpiiancc) [![license: MIT](https://img.shields.io/badge/license-MIT-green)](https://github.com/phguo/Send-to-Telegram-Chrome-extension/blob/master/LICENSE)
+[![Chrome Web Store](https://img.shields.io/chrome-web-store/users/dgblfklicldlbclahclbkeiacpiiancc?color=brightgreen&logo=google-chrome)](https://chrome.google.com/webstore/detail/send-to-telegram-for-goog/dgblfklicldlbclahclbkeiacpiiancc) [![license: MIT](https://img.shields.io/badge/license-MIT-green)](https://github.com/phguo/Send-to-Telegram-Chrome-Extension/blob/master/LICENSE)
 
 <a href="https://www.producthunt.com/posts/send-to-telegram-a-chrome-extension?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-send&#0045;to&#0045;telegram&#0045;a&#0045;chrome&#0045;extension" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=338928&theme=light" alt="Send&#0032;to&#0032;Telegram&#0058;&#0032;A&#0032;Chrome&#0032;Extension - Send&#0032;web&#0032;content&#0032;to&#0032;your&#0032;Telegram&#0032;bot&#0032;privately&#0046; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
-__** IT WORKS (UPDATED: 2023-03-03) **__
+__** IT WORKS (UPDATED: 2024-08-14) **__
 
-This is a Chrome extension that allow you to send web content (tab, text, image) to your own "Telegram Bot" using official Telegram API, such that your can sync interesting things across devices, i.e., your phone, your PC, and your laptop. 
+This is a Chrome extension that allows you to send web content (tab, text, image) to your own "Telegram Bot" using official Telegram API, such that you can sync interesting things across devices, i.e., your phone, your PC, and your laptop. 
 
-This project is an alternative for [Pushbullet](https://www.pushbullet.com/) which stopped release on iOS ([Not Available on iOS : PushBullet](https://www.reddit.com/r/PushBullet/comments/eirc1m/not_available_on_ios/)). Since third party server is not required for this extension, so you do not need to worry about privacy.
+This project is an alternative to [Pushbullet](https://www.pushbullet.com/) which stopped release on iOS ([Not Available on iOS : PushBullet](https://www.reddit.com/r/PushBullet/comments/eirc1m/not_available_on_ios/)). Since a third-party server is not required for this extension, so you do not need to worry about privacy.
 
-This extension can be installed from [Chrome Web Store - Send to Telegram for Google Chrome](https://chrome.google.com/webstore/detail/send-to-telegram-for-goog/dgblfklicldlbclahclbkeiacpiiancc) (recommended) or the [release page](https://github.com/phguo/Send-to-Telegram-Chrome-extension/releases/latest).
 
 ## Getting Start
 
-0. Install "Send to Telegram for Google Chrome" from [Chrome Web Store](https://chrome.google.com/webstore/detail/send-to-telegram-for-goog/dgblfklicldlbclahclbkeiacpiiancc).
+0. Install "Send to Telegram" from [Chrome Web Store - Send to Telegram](https://chrome.google.com/webstore/detail/send-to-telegram-for-goog/dgblfklicldlbclahclbkeiacpiiancc).
 1. Create a Telegram Bot following [Telegram official introduction](https://core.telegram.org/bots#6-botfather) and get your bot `<API token>`.
-2. Get your `<User ID> ` by visiting `https://api.telegram.org/bot<API token>/getUpdates` after you send arbitrary content to your bot in telegram APP. The field "id" in the HTTP response is your `<User ID>`.
-3. Fill your `<API token>` and `<User ID>` in the extension setting page. If everything is going on smoothly, the setting page will show a green "Saved!" and your bot will send your a massage of "Setting for 'Send-to-Telegram' successfully."
+2. **Send any message to the bot created, in the Telegram APP.**
+3. Get your `<User ID> ` (value of `id` in the response) by visiting `https://api.telegram.org/bot<API token>/getUpdates`.
+4. Fill your `<API token>` and `<User ID>` in the extension setting page. 
+5. If everything is working correctly, the settings page and your bot will display '"Send to Telegram" configured successfully!'.
 
 ## Usage
 
 You can use this extension intuitively:
 
 - Send **tab** to your bot
-  - click on the top right extension icon <img src="https://github.com/phguo/Send-to-Telegram-Chrome-extension/blob/master/tg.png" alt="Telegram icon" width="15" height="15">.
+  - click on the top right extension icon <img src="https://github.com/phguo/Send-to-Telegram-Chrome-Extension/blob/master/tg.png" alt="Telegram icon" width="15" height="15">.
 - Send **text** to your bot
   - select web content and right click -> `Push this selection to Telegram Bot`.
 - Send **image** to your bot
-  - right click on an image -> `Send to Telegram for Google Chrome`.
-- Send **URL** to yout bot
-  - right click on a URL -> `Send to Telegram for Google Chrome`.
+  - right click on an image -> `Send to Telegram`.
+- Send **URL** to your bot
+  - right click on a URL -> `Send to Telegram`.
 
 ## Changelog
 
-- [v0.9](https://github.com/phguo/Send-to-Telegram-Chrome-extension/releases/tag/v0.9) - Mar. 31, 2021
+- [v1.1.1](https://github.com/phguo/Send-to-Telegram-Chrome-Extension/releases/tag/v1.1.1) - Aug. 14, 2024
+  - Migrate to Manifest V3.
+  - Change the icon.
+  - Add "Setup Instruction" to the options page.
+
+- [v0.9](https://github.com/phguo/Send-to-Telegram-Chrome-Extension/releases/tag/v0.9) - Mar. 31, 2021
   - The first release.
 
 ## TODO
@@ -49,8 +55,9 @@ You can use this extension intuitively:
 
 ## License
 
-This project is licensed under the MIT License, see the [LICENSE](https://github.com/phguo/Send-to-Telegram-Chrome-extension/blob/master/LICENSE) file for details.
+This project is licensed under the MIT License, see the [LICENSE](https://github.com/phguo/Send-to-Telegram-Chrome-Extension/blob/master/LICENSE) file for details.
 
 ## Acknowledgments
 
-This project was forked from [rahimnathwani/pushover-for-chrome](https://github.com/rahimnathwani/pushover-for-chrome) for Pushover.
+- This project was forked from [rahimnathwani/pushover-for-chrome](https://github.com/rahimnathwani/pushover-for-chrome) for Pushover.
+- The [icon](https://github.com/phguo/Send-to-Telegram-Chrome-Extension/blob/master/tg.png) was created by Picons on [Flaticon](https://www.flaticon.com/free-icons/phone).

background.js

@@ -1,119 +1,76 @@
-var open_options = function(msg) {
-    if(msg) {
-        localStorage._options_msg = msg;
-    }
+var open_options = function() {
     if (chrome.runtime.openOptionsPage) {
         return chrome.runtime.openOptionsPage();
     }
     return chrome.tabs.create({
         url: chrome.runtime.getURL('options.html')
     });
 },
-combo_valid = function() {
-    var valid = localStorage.valid || '',
-        token = localStorage.token || '',
-        userkey = localStorage.userkey || '';
+
+combo_valid = async function() {
+    const {valid, token, userkey} = await chrome.storage.local.get(['valid', 'token', 'userkey']);
 
     if (!valid || valid !== token + userkey) {
-        open_options('Please check your configuration!');
+        open_options();
         return false;
     }
     return true;
 },
-show_badge_text = function(color, text, timeout) {
-    chrome.browserAction.setBadgeBackgroundColor({
+
+show_badge_text = function(color, text, timeout){
+    chrome.action.setBadgeBackgroundColor({
         'color': color
     });
-    chrome.browserAction.setBadgeText({
+    chrome.action.setBadgeText({
         'text': text
     });
     setTimeout(function() {
-        chrome.browserAction.setBadgeText({
+        chrome.action.setBadgeText({
             'text': ''
         });
     }, timeout * 1000);
 },
-push_message = function(source, tab, selection, device) {
+
+push_message = async function(source, tab, selection, device) {
     if (!combo_valid()) {
         return false;
     }
 
-    // var params = 'token=' + encodeURIComponent(localStorage.token) +
-    //              '&user=' + encodeURIComponent(localStorage.userkey) +
-    //              '&title=' + encodeURIComponent(tab.title) +
-    //              '&url=' + encodeURIComponent(tab.url.substring(0, 500)) +
-    //              '&url_title=' + encodeURIComponent('Open the link');
-
-    // if (source === 'badge' && localStorage.devices_badge) {
-    //     device = localStorage.devices_badge;
-    // }
-
-    // if (device) {
-    //     params += '&device=' + encodeURIComponent(device);
-    // }
-
-    // if (selection) {
-    //     params += '&message=' + encodeURIComponent(selection.substring(0, 512));
-    // } else {
-    //     params += '&message=' + encodeURIComponent(tab.url.substring(0, 500));
-    // }
-
-    // if (localStorage.sound) {
-    //     params += '&sound=' + encodeURIComponent(localStorage.sound);
-    // }
-
     if (selection) {
         var text = encodeURIComponent(selection.substring(0, 512));
     } else {
         var text = encodeURIComponent(tab.url.substring(0, 500));
     }
 
-    var req = new XMLHttpRequest();
-    var url = 'https://api.telegram.org/bot' + 
-                     localStorage.token + 
-                    '/sendMessage';
-    url += '?chat_id=' + encodeURIComponent(localStorage.userkey);
+    const {userkey, token} = await chrome.storage.local.get(['userkey', 'token']);
+    var url = 'https://api.telegram.org/bot' + token + '/sendMessage';
+    url += '?chat_id=' + encodeURIComponent(userkey);
     url += '&text=' + text;
     url += encodeURIComponent('\n\nFrom: \n' + tab.title + '\n' + tab.url)
-    req.open('GET', url, true);
-    req.setRequestHeader("Content-Type", "application/json");
-    req.send();
 
-    req.onreadystatechange = function() {
-        if (req.readyState === 4) {
-            if (req.status === 200) {
-                show_badge_text('#006400', 'OK', 2);
-            } else {
-                var response = JSON.parse(req.responseText);
-                if(response.errors) {
-                    alert('Error: ' + response.errors);
-                } else {
-                    // Lets blast the user with the response :)
-                    alert('Error: ' + req.responseText);
-                }
-                show_badge_text('#ff0000', 'FAIL', 5);
-            }
+    fetch(url, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    })
+    .then((response) => {
+        if (!response.ok) {
+            throw new Error("Network response was not ok.");
+        } else {
+            show_badge_text('#006400', '✓', 2);
         }
-    };
+    })
+    .catch((error) => {
+        console.error(`Fetch Error: ${error}`);
+        alert('Error: ' + error);
+        show_badge_text('#ff0000', '✗', 2);
+    });
+
     return false;
 },
 
-// split_by_comma_list = function(value) {
-//     if (!value) {
-//         return [];
-//     }
-//     return value.split(',');
-// },
-// get_menu_devices = function() {
-//     var devices = split_by_comma_list(localStorage.devices_menu);
-//     if (!devices.length) {
-//         devices = split_by_comma_list(localStorage.devices_all);
-//     }
-//     return devices;
-// },
-
 setup_context_menus = function() {
-    // var devices = get_menu_devices(),
     var devices = ['Telegram Bot'],
         ctxs = ['page', 'link', 'image', 'selection'];
     chrome.contextMenus.removeAll();
@@ -130,8 +87,8 @@ setup_context_menus = function() {
     }
 };
 
-chrome.browserAction.onClicked.addListener(function(tab) {
-    chrome.tabs.sendRequest(tab.id, {
+chrome.action.onClicked.addListener(function(tab) {
+    chrome.tabs.sendMessage(tab.id, {
         method: 'selection'
     }, function(text) {
         push_message('badge', tab, text);
@@ -145,7 +102,6 @@ chrome.runtime.onMessage.addListener(function(request) {
 });
 
 chrome.contextMenus.onClicked.addListener(function(info, tab) {
-    // var devices = get_menu_devices();
     var devices = ['Telegram Bot'];
     if (devices.length) {
         for (var i = 0; i < devices.length; i++) {
@@ -162,11 +118,6 @@ chrome.contextMenus.onClicked.addListener(function(info, tab) {
     }
 });
 
-if (!localStorage.devices_all && localStorage.device) {
-    localStorage.devices_all = localStorage.device;
-    localStorage.removeItem('device');
-}
-
 if (combo_valid()) {
     setup_context_menus();
-}
+}

content_script.js

@@ -1,3 +1,3 @@
-chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
     sendResponse(window.getSelection().toString());
 });

manifest.json

@@ -1,24 +1,30 @@
 {
   "name": "Send to Telegram for Google Chrome",
-  "version": "0.0.0.2",
+  "version": "1.1.1",
   "description": "Send to Telegram for Google Chrome, with your own key and token.",
-  "browser_action": {
+  "action": {
     "default_icon": "tg.png",
     "default_title": "Push this page!"
   },
   "background": {
-    "scripts": ["background.js"]
+    "service_worker": "background.js"
   },
   "icons": {
       "128": "tg.png"
   },
   "options_page": "options.html",
   "permissions": [
-    "tabs", "http://*/*", "https://*/*", "contextMenus"
+    "tabs",
+    "contextMenus",
+    "storage"
+  ],
+  "host_permissions": [
+    "http://*/*",
+    "https://*/*"
   ],
   "content_scripts": [{
     "matches": ["http://*/*", "https://*/*"],
     "js": ["content_script.js"]
   }],
-  "manifest_version": 2
+  "manifest_version": 3
 }

options.html

@@ -1,22 +1,22 @@
 <!doctype html>
 <html>
 <head>
-    <title>Send-to-Telegram</title>
+    <title>Send to Telegram</title>
     <style type="text/css">
         body {
             background-color: white;
-            padding: 80px;
+            padding: 8px;
             font-family: Helvetica, Arial, Serif;
         }
-        input, button, select, option {
+        /* input, button, select, option {
             border-radius: 5px;
             background-color: rgb(235, 235, 235);
             padding: 5px;
             font-weight: bold;
             border: 1px solid rgb(12, 40, 99);
-        }
+        } */
         .input {
-            width: 300px;
+            width: 400px;
         }
         select {
             width: 310px;
@@ -29,47 +29,35 @@
             font-weight: bold;
         }
         #message {
-            font-size: 20px;
+            font-size: 15px;
             color: green;
-            font-weight: bold;
+            /* font-weight: bold; */
         }
     </style>
 </head>
 <body>
-    <h1>Send-to-Telegram for Google Chrome</h1>
+    <h1>Send to Telegram</h1>
     <table border="0">
         <tr>
-            <td>
-            <td id='message'>&nbsp;
-        <!-- <tr>
-            <td>Get yours here:
-            <td><a href="https://pushover.net/" target=_blank>https://pushover.net</a> -->
-        <tr>
-            <td>API Key:
+            <td>API Token:
             <td><input id='token' class="input">
         <tr>
             <td>User ID:
             <td><input id='userkey' class="input">
         <tr>
-        <!-- <tr>
-            <td>Sound:
-            <td><select id="sounds"></select> -->
-        <tr>
-            <td>
             <td><button id='save'>Save</button>
-        <!-- <tr>
-            <td>Devices:
-            <td>
-        <tr>
-            <td>- badge:
-            <td id="devices_badge">-
-        <tr>
-            <td>- menu:
-            <td id="devices_menu">-
-        <tr>
-            <td>
-            <td><small>* De-selecting all devices will send notifications to every device!</small> -->
+                <td id='message'>&nbsp;
     </table>
+    <h4>Setup Instruction:</h4>
+    <ol>
+        <li>Install "Send to Telegram" from <a href="https://chrome.google.com/webstore/detail/send-to-telegram-for-goog/dgblfklicldlbclahclbkeiacpiiancc">Chrome Web Store - Send to Telegram</a>.</li>
+        <li>Create a Telegram Bot following <a href="https://core.telegram.org/bots#6-botfather">Telegram official introduction</a> and get your bot <code>&lt;API token&gt;</code>.</li>
+        <li><strong>Send any message to the bot created, in the Telegram APP.</strong></li>
+        <li>Get your <code>&lt;User ID&gt;</code> (value of "<code>id</code>" in the response) by visiting <code>https://api.telegram.org/bot&lt;API token&gt;/getUpdates</code>.</li>
+        <li>Fill your <code>&lt;API token&gt;</code> and <code>&lt;User ID&gt;</code> in the extension setting page.</li>
+        <li>If everything is working correctly, this page and your bot will display '"Send to Telegram" configured successfully!'.</li>
+    </ol>      
     <script type="text/javascript" src="options.js"></script>
+
 </body>
 </html>