Merge pull request #127 from tdulcet/chrome

Added Chromium/Chrome support

README.md

@@ -5,7 +5,7 @@
 [![Mozilla Add-on users](https://img.shields.io/amo/users/awesome-emoji-picker.svg)](https://addons.mozilla.org/firefox/addon/awesome-emoji-picker/?utm_source=github.com&utm_medium=git&utm_content=badge-users&campaign=github)
 [![Mozilla Add-on stars](https://img.shields.io/amo/stars/awesome-emoji-picker.svg)](https://addons.mozilla.org/firefox/addon/awesome-emoji-picker/reviews/?utm_source=github.com&utm_medium=git&utm_content=badge-stars&campaign=github)
 
-This (Firefox and Thunderbird) add-on (WebExtension) gives you a modern emoji picker that you can use to find and select emojis (i.e. the emoticons/smileys you know from messengers such as 😃, 😎 or 🤪). It will be directly copied to your clipboard and/or inserted into the active input on the page, when you choose it.
+This (Firefox, Chromium/Chrome and Thunderbird) add-on (WebExtension) gives you a modern emoji picker that you can use to find and select emojis (i.e. the emoticons/smileys you know from messengers such as 😃, 😎 or 🤪). It will be directly copied to your clipboard and/or inserted into the active input on the page, when you choose it.
 
 You can then use the emojis on almost any web page, including your favorite messenger (such as WhatsApp, Telegram, Threema, Signal, Wire etc.), social media (Facebook, Instagram, Twitter, Mastodon etc.) and even e-mails.
 
@@ -21,7 +21,7 @@ It uses up-to-date Emojis and let's you access your Emojis in different styles y
 
 It is based on the awesome [emoji-mart](https://missive.github.io/emoji-mart/). You can test many features there already, before installing it.
 
-This extension only works with Firefox v87 or higher and Thunderbird v87 or higher.
+This extension works with Firefox v74 or higher, Chromium/Chrome and Thunderbird v87 or higher.
 
 The development of this add-on was also triggered, because the development of another add-on called [“Emoji Helper” or “Emoji Cheatsheet” stalled](https://github.com/johannhof/emoji-helper/issues/127).
 
@@ -61,7 +61,7 @@ See:
 * Emoji skin tone is adjustable and is remembered.
 * You can also insert the emoji's `:colon:` syntax instead of the Unicode emoji that is used by default.
 * Use the hot key (by default <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Period</kbd>) to quickly access the emoji picker.
-* Emojis/settings automatically synced between all browser instances and devices (Firefox only).
+* Emojis/settings automatically synced between all browser instances and devices (browsers only).
 * Adjust the style and many other options to your liking.
 * The size of the whole emoji picker and the emojis itself is also adjustable.
 * Use a colored toolbar icon or a decent monochrome (black/white) one.

scripts/manifests/chromemanifest.json

@@ -0,0 +1,68 @@
+{
+  "manifest_version": 2,
+  "name": "__MSG_extensionName__",
+  "short_name": "__MSG_extensionNameShort__",
+  "version": "2.0",
+  "author": "rugk, Teal Dulcet",
+
+  "description": "__MSG_extensionDescription__",
+  "homepage_url": "https://github.com/rugk/awesome-emoji-picker",
+
+  "browser_action": {
+    "browser_style": true,
+    "chrome_style": true,
+    "default_icon": "icons/fa-grin-dark.png",
+    "default_title": "__MSG_browserActionButtonTitle__",
+    "default_popup": "popup/index.html",
+    "theme_icons": [
+      {
+        "dark": "icons/fa-grin-dark.png",
+        "light": "icons/fa-grin-light.png",
+        "size": 32
+      }
+    ]
+  },
+
+  "omnibox": {
+    "keyword": "emoji"
+  },
+
+  "options_ui": {
+    "page": "options/options.html",
+    "browser_style": true,
+    "chrome_style": true
+  },
+
+  "background": {
+    "page": "background/background.html"
+  },
+  "commands": {
+    "_execute_browser_action": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Period"
+      },
+      "description": "__MSG_commandOpenPopup__"
+    }
+  },
+
+  // testing version allows loading unit test libraries from CDNs
+  "content_security_policy": "default-src 'self'; img-src data:; style-src 'self' https://unpkg.com; script-src 'self' https://unpkg.com",
+  "icons": {
+    "32": "icons/icon_32.png",
+    "64": "icons/icon_64.png",
+    "128": "icons/icon_128.png"
+  },
+  "default_locale": "en",
+
+  "permissions": [
+    "storage",
+    "activeTab",
+    "tabs",
+    "contextMenus"
+  ],
+
+  "optional_permissions": [
+    "clipboardWrite"
+  ]
+  // "search" currently not requested though, see https://discourse.mozilla.org/t/why-do-we-need-an-extra-permission-simply-for-starting-a-search/41174?u=rugkx
+}

src/background/background.html

@@ -7,6 +7,7 @@
 	<head>
 		<meta charset="utf-8">
 		<!-- async currently disabled, because of https://bugzilla.mozilla.org/show_bug.cgi?id=1506464 -->
+		<script type="application/javascript" src="../browser-polyfill.js"></script>
 		<script src="./modules/InstallUpgrade.js" type="module" charset="utf-8"></script>
 		<script async src="background.js" type="module" charset="utf-8"></script>
 	</head>

src/common/modules/PageHandler.js

@@ -35,6 +35,7 @@ export async function insertIntoPage(text) {
         });
 
         // send request to insert emoji
+        // This will not work in Manifest V3: https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#executing-arbitrary-strings
         return browser.tabs.executeScript(tab.id, {
             code: `insertIntoPage("${text}");`,
             allFrames: true,

src/options/options.html

@@ -6,6 +6,7 @@
 		<link rel="stylesheet" href="../common/common.css">
 		<link rel="stylesheet" href="options.css">
 
+		<script type="application/javascript" src="../browser-polyfill.js"></script>
 		<script async src="./fastLoad.js" type="module"></script>
   		<script defer src="../common/common.js" type="module"></script>
 		<script defer src="./options.js" type="module"></script>

src/popup/index.html

@@ -7,10 +7,11 @@
 		<link rel="stylesheet" href="/common/lib/emoji-mart-embed/dist/emoji-mart.css">
 		<link rel="stylesheet" href="index.css"> <!-- load later then emoji-mart so overwriting is possible -->
 
+		<script type="application/javascript" src="../browser-polyfill.js"></script>
 		<script defer src="../common/common.js" type="module" charset="utf-8"></script>
 		<script defer src="index.js" type="module" charset="utf-8"></script>
 		<!-- we need to load emoji-mart last, so autoFocus works -->
-		<script defer src="/common/lib/emoji-mart-embed/dist/emoji-mart.js"></script>
+		<script src="/common/lib/emoji-mart-embed/dist/emoji-mart.js"></script>
 	</head>
 	<body>
 		<aside class="message-container">