curtischong/messenger-assistant

A framework to create extensions for FB Messenger

Messenger-Assistant

Features

• Reminders
• Copy and paste emojis at will ¯\(ツ)/¯
• A graph that displays the number of characters sent over time

Installation

1. Run git clone [email protected]:curtischong/Messenger-Assistant.git in your terminal.
2. Change const YOUR_NAME = "Curtis"; in settings.js to your name. (Please capitalize your name).
3. Choose which extensions you want by placing the name of the extension in the EXTENSIONS_TO_LOAD array in settings.js. All extensions are selected by default.
4. Load the unpacked extension into Chrome https://github.com/web-scrobbler/web-scrobbler/wiki/Install-an-unpacked-extension.
5. go on messenger.com and the side panel should appear! (You may need to reload messenger.com).

Design Decisions

• Each Messenger-Assistant Extension should have an index, script, and syle.css under its directory name in the extensions directory.
• The dependencies directory is on the outside so multiple extensions can reuse the same dependencies.

How Create a Messenger Assistant Extension

1. Put the html, css, and js files for your extension under the extensions directory.
2. In the manifest.json add the path to your js and css files under content_scripts. Then add the path to your HTML file under web_accessible_resources.
3. in main.html add <div data-include="<your_extension_name>"></div> in the <div id="extensionsCon">...</div> section.
4. Put <extensionName>Init() in the initOnPageLoad() function in extensions.js to initialize your extension. Your init function can return variables that will be passed on at every triggered event in extensions.js. Simply put these variables in initVars if you need to reference them later.
5. Put functions that you want to be called for each event in extensions.js. The current supported events are: initOnPageLoad(), initOnChatLoad(), onRefreshBtnPressed(), and onChatChange().
6. If your extension needs to make an external network call go into manifest.json and change the website in the content_security_policy section to the url of your website.

Dev Notes

• If you update the manifest.json you have to manually turn off/on the extension in the extensions page (Extensions Reloader won't work).
• This repo uses ES6 so if you are traversing DOM elements in jquery use .each((idx, element) => {})'; when looping through children elements.
• Due to limitations with Chrome extensions, when you create a new file you must delete Messenger Assistant and reload the unpacked version of Messenger Assistant.