mdolr / survol Goto Github PK

We should cache requests to avoid spamming them when using survolBackgroundRequest

Currently the StackExchange implementation only works for stackoverflow.com, it should work with any website that supports the stackexchange API.

To do this you should modify the dispatcher function in js/core.js and change the implementation in js/templates/stackexchange.js

When content is loaded on a page asynchronously, the extension doesn't work on it as it is parsing a hrefs only on page load.
The landing page is a great example, every contributor profile should be "survol-able" not just mine (which is hard coded).

Something similar to how survol works with a wikipedia link.

Reason being that with the new system the user wouldn't be able to play or pause the video and the extension shouldn't try to do picture in picture or anything like that, it should just be a preview of what you're going to click on.

Integration of reddit.com

• Preview comments (done)
• Preview posts

Using reddit's embed code

Like #51 add bandcamp song title / author

Right now, tweets are displayed as texts and hashtags appear like that : {tweet text} {Hashtag} {tweet...}.
The goal of this is issue is to parse hashtags in a tweet to display them just like on twitter {tweet text} #{hashtag} {tweet...}

The project needs a graphic identity.
At least it needs an icon that can be clearly recognized so people can quickly change their options when needed without having to search for the extension for more than a minute if they have a lot of extensions already.

If you want to submit an icon it has to be compatible with the license (Apache 2.0) of the repository

When you hover a link too fast sometimes 2 elements are appended to the survol div instead of just 1

Add a github integration for repositories, it could display things like :

• Project name
• Project description
• Project Thubnail ?
• Beginning of the README.MD file ?
• Licence ?
• Star count ?
• Fork count ?
• Watchers count ?
• Number of opened issues ?

Hello,
The extension needs translation for different languages.

You can find the language code (or locale code) you should use on this page

Steps :

• Create a _locales/[language_code] folder
• Create a messages.json file at _locales/[language_code]/messages.json
• Copy paste content from _locales/en/messages.json
• Translate the "message" part for each JSON object

Date should be displayed like on reddit, "Submitted X hours/days ago by u/username"
Also if you could rework the post data in the footer a bit 👍

Create a little page which opens when clicking on the extension icon to disable the extension on the current website
Make sure we can add other options later like changing the language, or even switch other settings in the extension

Hello,
The extension needs translation for different languages.

You can find the language code (or locale code) you should use on this page

Steps :

• Create a _locales/[language_code] folder
• Create a messages.json file at _locales/[language_code]/messages.json
• Copy paste content from _locales/en/messages.json
• Translate the "message" part for each JSON object

Maybe people don’t want to preciew everything, we could add a setting to only preview things if a key is being pressed.

Users should be able to modify this key

Suggestion from reddit

Apparently some people have trouble using the extension has it slows their page loading speed, this is likely due to the equipNodes function and the mutationObserver

If you have any idea on how to improve performances please feel free to make a PR

When a direct link to an imgur image is hovered it should be previewed, not just for imgur but any host.

Currently posts are not looking good, the goal is to find a way to make them look like real embed tweets provided by reddit embed code (i.e embedly). As with twitter we can't use the script provided by embedly as it doesn't work as an content script so we're not able to generate embeds or load them.

Once the survol preview appears it should stop moving while you're hovering the link, or the container itself.
You should be able to interact with it, select things in it, press buttons.

Integrate twitter profiles to survol, should display profile picture + bio + ?
@jsilvaigor

Integration of wikipedia.com

• Preview articles

Note: Use the page summary endpoint docs.

Hey, looks like you need translations into different languages for your app
Can i work on Indonesian translation?
Thanks 😃

Hello,
The extension needs translation for different languages.

You can find the language code (or locale code) you should use on this page

Steps :

• Create a _locales/[language_code] folder
• Create a messages.json file at _locales/[language_code]/messages.json
• Copy paste content from _locales/en/messages.json
• Translate the "message" part for each JSON object

Sometimes the div goes out of the screen because the a href is on the bottom or far right of the page.
In this case switch the div above the cursor instead of below or on the left of the cursor instead of the right

Add the possibility to switch the survol div to dark mode.

Tasks :

• Add a setting in the settings popup to toggle dark mode
• Change the CSS to have a dark mode maybe using css variables ?

Parse and add the date to the tweet (at the bottom or next to the username?)
The variable you should parse is html given in the twitter call answer at js/templates/twitter.js:34

Hello,
The extension needs translation for different languages.

You can find the language code (or locale code) you should use on this page

Steps :

• Create a _locales/[language_code] folder
• Create a messages.json file at _locales/[language_code]/messages.json
• Copy paste content from _locales/en/messages.json
• Translate the "message" part for each JSON object

Currently twitter picutres/videos appear like that in tweets

Make it so that in twitter.js you parse html given by twitter in the response to embed the media
The result should look like this :

Hello,
The extension needs translation for different languages.

You can find the language code (or locale code) you should use on this page

Steps :

• Create a _locales/[language_code] folder
• Create a messages.json file at _locales/[language_code]/messages.json
• Copy paste content from _locales/en/messages.json
• Translate the "message" part for each JSON object

Goes with #107 and it could display things like :

• Username
• Repository count ?
• Languages ?
• Workplace, organization ?
• Website ?
• Twitter profile etc...

Hello,
The extension needs translation for different languages.

You can find the language code (or locale code) you should use on this page

Steps :

• Create a _locales/[language_code] folder
• Create a messages.json file at _locales/[language_code]/messages.json
• Copy paste content from _locales/en/messages.json
• Translate the "message" part for each JSON object

Currently the youtube integration only works for videos since #8 .
Add the preview of channels in js/templates/youtube.js

You should make it so that you find a way to consistantly identify channel links and return the type of a link being channel in the checkLinkType function

You should inject the HTML elements needed to preview a channel when the link is hovered in the bindToNode function (please do not use innerHTML and prefer DOM manipulation for firefox support)

Try to have reddit comments look the same as reddit posts

Make sure the content always fits on the screen, here are various things that could be done :

• Set a max height
• Limit the size of the content (for example: only display X words in the preview)

This has to be done as sometimes the container is below the cursor but because there is not enough space its position is changed to above the cursor even though it doesn't fit too.

The container positionning logic is situated in js/core.js in the mousemove event.

Currently the extension code runs on both the extension and the github pages integration (at survol.me). To make sure the user experience is the same when trying the extension on github pages and using it, I'm importing scripts directly from the github repository. The only thing that I've added is a custom function which replaces window.survolBackgroundRequest

The script implenting this custom function is available at docs/scripts/survolBackgroundRequest.js and it runs the following code :

/**
 * Override js/core.js window.survolBackgroundRequest
 */
var REQUEST_CACHE = {};

// Clear cache every 10 mins
setInterval(() => {
    REQUEST_CACHE = {};
}, 1000 * 60 * 10);

document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        window.survolBackgroundRequest = (url, noJSON) => {

            return new Promise((resolve, reject) => {
                let req = { data: { url, noJSON } };
                let res = { status: 'error', data: null };

                // if the request is cached
                if (REQUEST_CACHE[req.data.url]) {
                    res = REQUEST_CACHE[req.data.url];
                    res.cached = true;
                    resolve(res);
                }

                // If the request isn't cached
                else {
                    fetch(`https://cors-anywhere.herokuapp.com/${req.data.url}`)
                        .then((data) => { return req.data.noJSON ? data.text() : data.json(); })
                        .then((data) => {
                            res.data = data;
                            res.status = 'OK';
                            res.cached = false;
                            REQUEST_CACHE[req.data.url] = res;
                            resolve(res);
                        })
                        .catch((error) => {
                            res.data = error;
                            res.status = 'error';

                            console.error('SURVOL - Fetching error', error);
                            reject(res);
                        });
                }
            });
        };
    }, 50);
});

The extension is also able to detect if it's running as an extension or as a script in a web page in js/core.js :

// If the script is part of the extension
    if (window.chrome && chrome.runtime && chrome.runtime.id) {
        chrome.storage.local.get(['disabledDomains', 'previewMetadata'], function (res) {
            let disabledDomains = res.disabledDomains ? res.disabledDomains : ['survol.me'];

            if (res.previewMetadata === false) {
                previewMetadata = false;
            }

            if (!disabledDomains.includes(getDomain(CURRENT_TAB).toLowerCase())) {
                insertSurvolDiv()
                    .then(gatherHrefs)
                    .then(equipNodes);
            }
        });
    }

    // Else the script is running in demo-mode on survol.me
    else {
        insertSurvolDiv()
            .then(gatherHrefs)
            .then(equipNodes);
    }

Should we work more on this and allow anyone to embed survol in order to add previews to their webpage easily ?
/discuss

Apparently having the extension sending GET requests when hovering a button triggers action in wordpress and can lead to the deletion of some articles for example.

When using survol on a shorted link (ie: goo.gl), it does not work 🚀

Hello,
The extension needs translation for different languages.

You can find the language code (or locale code) you should use on this page

Steps :

• Create a _locales/[language_code] folder
• Create a messages.json file at _locales/[language_code]/messages.json
• Copy paste content from _locales/en/messages.json
• Translate the "message" part for each JSON object

Integration of youtube.com youtu.be

• Preview the video player using youtube's embed code

Just like youtube, add song title + description (first 2 lines maybe not the whole description?) + song author? (as much data about the page as you can)

Hello,
The extension needs translation for different languages.

You can find the language code (or locale code) you should use on this page

Steps :

• Create a _locales/[language_code] folder
• Create a messages.json file at _locales/[language_code]/messages.json
• Copy paste content from _locales/en/messages.json
• Translate the "message" part for each JSON object

Hello,
The extension needs translation for different languages.

You can find the language code (or locale code) you should use on this page

Steps :

• Create a _locales/[language_code] folder
• Create a messages.json file at _locales/[language_code]/messages.json
• Copy paste content from _locales/en/messages.json
• Translate the "message" part for each JSON object

Integration of twitter.com

• Preview profiles (out of twitter.com as twitter already handles profile previewing)
• Preview tweets (what they're responding to ? Media ?)

If the link ends with a / it is detected as a post, but if the final / is missing the link won't embed.
Example:

• Should work but doesn't
• Works fine

This should appear when hovering a link formatted like this : youtube.com/channel/X
It should display things like :

• Username
• Profile picture
• Banner ?
• Subscriber count ?
• Videos count ?
• Last video ?

depending on what data we can get, this had already been looked into with #10 but the resulting PR was adding it in another way.

Currently tweets are not looking good, the goal is to find a way to make them look like real embed tweets provided by Twitter publisher.

We can't use the script provided by twitter as it doesn't work as a content script and I'm waiting currently waiting for an answer from Twitter dev forum
Because the script doesn't work we can't use createTweet or even load.

Here is an example, the embed gets cropped, in a normal scenario we should be able to see the red part :

It happens on both old.reddit.com and reddit.com

Sometimes when the content contains a link and the link is too long, it might get out of the container. It shouldn't happen

Build a simple and clean landing page (hosted through gh-pages) to showcase the extension