Skip to content
/ tab Public

A simple link viewer with support for custom data sources.

License

Notifications You must be signed in to change notification settings

4mbl/tab

Repository files navigation

A simple link viewer with support for custom data sources.

Table of Contents

Technologies

Usage

Head to tab.4mbl.net to use the site.

Customizing Data

You can customize the displayed links in two ways. You can either pass the links in the URL or use an external JSON data source.

Passing links in the URL

Simply pass the links as semicolon (or comma) separated values in the links query parameter.

For example: https://tab.4mbl.net/?links=example.com;example.org. You may also include the protocol in the URL.

It is also possible to pass local file paths. For example: https://tab.4mbl.net/?links=file:///C:/path/to/local/file.

External JSON Data Source

You can pass custom json data source with the src query parameter.

  1. Create a json file with the following structure:

    [
      {
          "url": "https://www.google.com",
          "title": "Google",
          "body": "Search Engine"
      },
      {
          "url": "https://www.github.com",
          "title": "GitHub",
          "body": "Code Hosting",
          "icon": "https://octodex.github.com/images/original.png"
      }
    ]

    Only url is required. Other fields are optional.

  2. Upload the file to a public server accessible via https. For example: https://npoint.io.

  3. Pass in the URL of the uploaded file to the src query parameter without the https protocol. For example: https://tab.4mbl.net/?src=4mbl.link/example/custom-new-tab-data. You might need to encode the url if it contains special characters.

Multiple data sources can be used by separating them with a semicolon (or comma).

Link Groups

You can also define group of links in the following way:

[
  {
    "url": "https://www.google.com",
  },
  {
    "type": "group",
    "title": "Social Media",
    "links": [
      {
        "url": "https://www.facebook.com",
      },
      {
        "url": "https://www.twitter.com",
      }
    ]
  }
]

Using as Chrome new tab page

To use the site as your new tab page in Chrome, follow these steps:

  1. Install some extension that allows you to set a custom new tab page. For example: New Tab Redirect.
  2. You might need to grant pop-up and redirect permissions for the site.
  3. Set the new tab page url to tab.4mbl.net. You can also pass src or links query parameter here.

Other browsers might have similar extensions. You are on your own there.

Page Metadata

You can customize the page metadata within the JSON data source.

[
  {
    "type": "metadata",
    "title": "My Custom Title",
    "description": "My Custom Description",
    "icon": "https://example.com/favicon.ico"
  },
    // link data...
]

You can also use the query parameters to do the same. For example: https://tab.4mbl.net/?title=Custom%20Title&description=Custom%20Desc&icon=https://google.com/favicon.ico. Query parameters take precedence over the JSON data source.

Other Features

  • The editor can be disabled with the editor=false query parameter.
  • Pressing Ctrl + A opens all links with a prompt for confirmation. This feature is shareable, meaning the prompt appears for all users accessing a URL that has the auto=true query parameter.

License

Distributed under the MIT license.

About

A simple link viewer with support for custom data sources.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published