[Deploy] Instagram DM service

zeyus commented 4 years ago

Service

This service allows you to have instagram DMs available in franz for as long as instagram allows messages from their mobile web.

Link to your repository

https://github.com/zeyus/franz-instagram-recipe

Additional Information

Known issues:

~~No custom CSS yet (and no darkmode) mean message bubbles are not full width and images in chat aren't full width/height.~~ now fixed
disappearing messages still require the app, perhaps implementing the private API would work but that is a huge amount of work

zeyus commented 4 years ago

I saw the previous deploy request for an Instagram service, I'm happy for my code to be merged into that one where relevant if that's the preferred way to do it, also the SVG icon in my repo is a custom recreation I made from the PNG version from the official Instagram assets

reikolydia commented 4 years ago

Your code for the enter key in DM works, good job there. we can just use your code for plug and play from now on, i was merely emulating instagram mobile with a safari browser on ios in electron.

i guess i was targeting keyup instead of keydown.

zeyus commented 4 years ago

@nnk95 Thanks, yeah I don't think it matters too much what browser string we use too much as long as it's mobile (though considering electron is basically chrome, I thought chrome/android made some sense) Also, do you know how often they change the class names of elements? because I wanted to make a CSS that changes the chat to fullwidth but not sure if it's worth trying to target class names if they change on every version increment.

One final thing, I added a message count/badge update GET request, which works great, but it should probably be rate limited because by default Franz calls the Loop function every 2 seconds which (I'm guessing) might hit some rate limit for the private API

reikolydia commented 4 years ago

@zeyus i'm sorry, i do not understand what you mean by "full width".

as to injecting css, here is an example of removing the 'get the app bar'

within your webview.js:

"use strict"

var _path = _interopRequireDefault(require("path")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

module.exports = (Franz) => {

const getMessages = function getMessages() { // Make a request for the message count, maybe this should be delayed more. fetch('https://www.instagram.com/direct_v2/web/get_badge_count/?no_raven=1') .then(response => response.json()).then(badges => Franz.setBadge(badges.badge_count)); };

Franz.loop(getMessages);

// Attach listener for "enter" key to send instead of newline. document.addEventListener('keydown', function(event) { try { if (event.keyCode == 13) { var buttons = document.getElementsByTagName('button'); for(var i=0;i<buttons.length;i++){ if(buttons[i].innerHTML == 'Send'){ buttons[i].click(); event.preventDefault(); break; } } } false; } catch (e) { }; return true; });

Franz.injectCSS(_path.default.join(__dirname, 'style.css')); };

and within style.css (create new css file in same folder as webview.js):

.Z_Gl2 { display: none; }

for color changes (or dark mode), it would seem that the class names are largely dependant on instagram's naming and less of franz/electron. you'd also want to include a button for the user to toggle between modes (although that is optional).

we can look into this together if you want.

zeyus commented 4 years ago

@nnk95 https://github.com/zeyus/franz-instagram-recipe/pull/1

zeyus commented 4 years ago

Btw, I meant full width message bubbles, because the UI restricted them to about 240px so if you make Franz wider the messages just get further apart, the branch I made fixed that issue too

On Wed, Jan 15, 2020, 11:13 Jazereel Goh notifications@github.com wrote:

@zeyus https://github.com/zeyus i'm sorry, i do not understand what you mean by "full width".

as to injecting css, here is an example of removing the 'get the app bar'

within your webview.js:

"use strict"

var _path = _interopRequireDefault(require("path")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

module.exports = (Franz) => {

const getMessages = function getMessages() { // Make a request for the message count, maybe this should be delayed more. fetch('https://www.instagram.com/direct_v2/web/get_badge_count/?no_raven=1 ') .then(response => response.json()).then(badges => Franz.setBadge(badges.badge_count)); };

Franz.loop(getMessages);

// Attach listener for "enter" key to send instead of newline. document.addEventListener('keydown', function(event) { try { if (event.keyCode == 13) { var buttons = document.getElementsByTagName('button'); for(var i=0;i<buttons.length;i++){ if(buttons[i].innerHTML == 'Send'){ buttons[i].click(); event.preventDefault(); break; } } } false; } catch (e) { }; return true; });

Franz.injectCSS(_path.default.join(__dirname, 'style.css')); };

and within style.css (create new css file in same folder as webview.js):

.Z_Gl2 { display: none; }

for color changes (or dark mode), it would seem that the class names are largely dependant on instagram's naming and less of franz/electron. you'd also want to include a button for the user to toggle between modes (although that is optional).

we can look into this together if you want.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/meetfranz/plugins/issues/453?email_source=notifications&email_token=AAASPCDFVEO6URRLGUGCSW3Q53OUDA5CNFSM4KG3BULKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEI7Y5IA#issuecomment-574590624, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAASPCB2OCNMC4NKXSZ33ADQ53OUDANCNFSM4KG3BULA .

meetfranz / plugins