Add support for image and video links in plugin manifest.json

Retr0ve · 2022-07-12T10:03:12.911Z

Hi guys,
When implementing the Website Plugin, I did some investigation on other apps/extensions stores. Most of them has a feature to show an instruction video or several screenshots. For example, Chrome Extension Store.

image1022×499 67.6 KB

And Firefox Addon store.

image851×345 62.7 KB

However, I can't think of any way to do it in our website since the data source manifest.json didn't include pics or video links.

I'm proposing to include such fields in the manifest.json. An example would be like this:

{
    "media_urls": [
        {type:'video', url:'...'},
        {type:'image', url:'...'},
        {type:'image', url:'...'},
    ],
}

These URLs can be links to any image hosting service or you can upload pics in GitHub and get an image url such as https://raw.githubusercontent.com/....

Let me know what you think about this idea, thanks!

laurent · 2022-07-12T10:26:50.406Z

Yes that's a good idea. We'll need thumbnails at some point anyway, but while we're at it we could add support for any kind of media. Usually we try to follow the Firefox and Chrome manifest for new fields - how do they store this information?

bishoy · 2022-07-12T10:27:20.603Z

Retr0ve:

I'm proposing to include such fields in the manifest.json. An example would be like this:

In my opinion, this solution is very practical. If this feature were added, it would make the website self-contained. In this case, the user doesn't need to go to GitHub.

Retr0ve · 2022-07-12T11:38:55.216Z

For Chrome, it didn't store screenshots in its manifest. Instead, it's uploaded through its dashboard. (ref) It only stores icons in the form of below. (ref)

 "icons": {
    "16": "icon16.png",
    "32": "icon32.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

And it's the same for Firefox Addons. But I found that in the Firefox web app, it contains a field like this. (ref)

"screenshots" : [
  {
    "src": "screenshot1.webp",
    "sizes": "1280x720",
    "type": "image/webp",
    "platform": "wide",
    "label": "Homescreen of Awesome App"
  },
  {
    "src": "screenshot2.webp",
    "sizes": "1280x720",
    "type": "image/webp",
    "platform": "wide",
    "label": "List of Awesome Resources available in Awesome App"
  }
]

And in all, I think there are two ways of implementing it. The first is to let developers declare the relative path of media in the manifest and store the files in their separate repos. Then we can use Joplin Bot to fetch the media from the repo and store it in joplin/plugins. The second is only allowing URLs in the manifest. In this way we don't need to store all the screenshots and it can support more media types potentially.

Retr0ve · 2022-07-14T08:53:15.457Z

With the investigation in the Chrome Extension Store and the Firefox Add-on Store, I find the following structure suitable for Joplin Plugins.

 "icons": {
    "16": "icon16.png",
    "32": "icon32.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
"media" : [
  {
    "url": "https://...",
    "sizes": "1280x720",
    "type": "image/webp",
    "platform": "desktop",
    "label": "Description of the Media"
  },
]

It adds two fields - icons and media.

In icons, it consists of key-value pairs of image size in px and image path relative to the root directory of the plugin.

In media, the label member is a string that serves as an accessible name for the media. It can also serve as alternative text. The platform member is also a string that can define the distribution platform for which the specific screenshots should apply to. It is reserved for future plugin systems on mobile devices. Potential values are: desktop, mobile.

Let me know if there are more fields to add, thanks!