link-preview-js
Advanced tools
# THIS LIBRARY DOES NOT WORK ON CORS PROTECTED ENVIRONMENTS: CHROME, FIREFOX, SAFARI, ETC
The link-preview-js npm package is used to generate link previews from URLs. It fetches metadata from the provided URL and returns information such as the title, description, image, and more. This is useful for creating rich link previews in applications like social media platforms, messaging apps, and content management systems.
Fetch Link Preview
This feature allows you to fetch a link preview from a given URL. The `getLinkPreview` function returns a promise that resolves with metadata such as the title, description, and images from the URL.
const { getLinkPreview } = require('link-preview-js');
getLinkPreview('https://www.example.com').then((data) => {
console.log(data);
});Custom Fetch Options
This feature allows you to customize the fetch options, such as setting custom headers. This can be useful for bypassing restrictions or simulating different user agents.
const { getLinkPreview } = require('link-preview-js');
getLinkPreview('https://www.example.com', {
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'
}
}).then((data) => {
console.log(data);
});Handle Different Content Types
This feature allows you to handle different content types returned by the URL. The `getLinkPreview` function provides the content type in the response, enabling you to process HTML, JSON, or other types of content accordingly.
const { getLinkPreview } = require('link-preview-js');
getLinkPreview('https://www.example.com').then((data) => {
if (data.contentType === 'text/html') {
console.log('HTML content:', data);
} else if (data.contentType === 'application/json') {
console.log('JSON content:', data);
}
});unfurl.js is a package that also fetches metadata from URLs to generate link previews. It provides similar functionality to link-preview-js but offers more customization options and supports additional metadata extraction methods.
metascraper is a library designed to scrape metadata from web pages. It is highly customizable and allows you to define your own rules for extracting metadata. Compared to link-preview-js, metascraper offers more flexibility and control over the scraping process.
open-graph-scraper is a package focused on extracting Open Graph metadata from URLs. It is specifically designed for Open Graph tags, making it a good choice if you primarily need Open Graph data. It is more specialized compared to the broader functionality of link-preview-js.
Pure js library that allows you to extract information from a URL or parse text and retrieve information from the first available link.
Library should work on node environments (thanks @uriva and @itaibs), library retains it's original name because it was originally created to work on react-native (and re-publishing on npm might break stuff), it is a generic js library so it should work wherever you can run JS, EXCEPT:
Chrome, Firefox, Safari, etc DO NOT ALLOW YOU TO DO CROSS SITE REQUESTS therefore you cannot use this library or even manually request another domain from your web browser application (read more about CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
MY ADVICE: CORS is there for a reason, it is a bad idea to directly fetch the response from an unkown server into the user device, if you really need this, you should pipe the request through your server, this library is able to do so because it works on node environments (for now, both xmlhttprequest and axios now do CORS requests), so if you need to fetch some sort of link preview do it through a server
Apparently the fetch especification breaks on some older samsung devices, a patch was made trying to fix this by using XMLHttpRequest, however this brings other problems, including breaking compatibility with node.js, so this was reverted, and this is final.
$ yarn add react-native-link-preview
Library exposes just one method: getPreview, you have to pass a string (doesn't matter if it is just a URL or a piece of text that contains a URL), the library will take care of parsing it and returning the info of first valid URL info it finds.
URL parsing is done via: https://gist.github.com/dperini/729294
import LinkPreview from 'react-native-link-preview';
...
LinkPreview.getPreview('https://www.youtube.com/watch?v=MejbOFk7H6c')
.then(data => console.debug(data));
LinkPreview.getPreview('This is a text supposed to be parsed and the first link displayed https://www.youtube.com/watch?v=MejbOFk7H6c')
.then(data => console.debug(data));
Additionally you can pass an options object which should add more functionality to the parsing of the link
| Property Name | Result |
|---|---|
| imagesPropertyType (optional) (ex: 'og') | Fetches images only with the specified property, meta[property='${imagesPropertyType}:image'] |
LinkPreview.getPreview(
'https://www.youtube.com/watch?v=MejbOFk7H6c',
{
imagesPropertyType: 'og', // fetches only open-graph images
})
.then(data => console.debug(data));
Returns a Promise that resolves with an object describing the provided link. The info object returned varies depending on the content type (MIME type) returned in the HTTP response (see below for variations of response). Rejects with an error if response can not be parsed or if there was no URL in the text provided.
{
url: "https://www.youtube.com/watch?v=MejbOFk7H6c",
title: "OK Go - Needing/Getting - Official Video - YouTube",
description: "Buy the video on iTunes: https://itunes.apple.com/us/album/needing-getting-bundle-ep/id508124847 See more about the guitars at: http://www.gretschguitars.com...",
images: ["https://i.ytimg.com/vi/MejbOFk7H6c/maxresdefault.jpg"],
mediaType: "video.other",
contentType: "text/html; charset=utf-8"
videos: [],
favicons:["https://www.youtube.com/yts/img/favicon_32-vflOogEID.png","https://www.youtube.com/yts/img/favicon_48-vflVjB_Qk.png","https://www.youtube.com/yts/img/favicon_96-vflW9Ec0w.png","https://www.youtube.com/yts/img/favicon_144-vfliLAfaB.png","https://s.ytimg.com/yts/img/favicon-vfl8qSV2F.ico"]
}
{
url: "https://media.npr.org/assets/img/2018/04/27/gettyimages-656523922nunes-4bb9a194ab2986834622983bb2f8fe57728a9e5f-s1100-c15.jpg",
mediaType: "image",
contentType: "image/jpeg",
favicons: [ "https://media.npr.org/favicon.ico" ]
}
{
url: "https://ondemand.npr.org/anon.npr-mp3/npr/atc/2007/12/20071231_atc_13.mp3",
mediaType: "audio",
contentType: "audio/mpeg",
favicons: [ "https://ondemand.npr.org/favicon.ico" ]
}
{
url: "https://www.w3schools.com/html/mov_bbb.mp4",
mediaType: "video",
contentType: "video/mp4",
favicons: [ "https://www.w3schools.com/favicon.ico" ]
}
{
url: "https://assets.curtmfg.com/masterlibrary/56282/installsheet/CME_56282_INS.pdf",
mediaType: "application",
contentType: "application/pdf",
favicons: [ "https://assets.curtmfg.com/favicon.ico" ]
}
yarn test
MIT license
FAQs
Javascript module to extract and fetch HTTP link information from blocks of text.
The npm package link-preview-js receives a total of 99,830 weekly downloads. As such, link-preview-js popularity was classified as popular.
We found that link-preview-js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.