前言

我制作了两个导航站，来收藏我关注的AI产品和效率工具，以便信息检索。

为了导航站能更直观的显示，我需要将大量的链接网站首页批量截图保存至Notion。

解决策略

通过LLM实现从自然语言到自动化脚本的转化，借助Chrome开发者工具作为自动截图工具，Cloudinary 作为外部图像服务，Notion API 作为接口。

这里用到的LLM是Claude 、ChatGPT 、Mistral 。

呈现效果

AIGC Bookmarks

My Favorite Tools

脚本运行演示

Chrome Screenshot to Notion Script Run Demo

Chrome Screenshot to Notion Script Run Demo

实现过程

与Claude对话六轮，实现初步脚本

对话一：基础，如何用Microlink API进行截图

<aside> <img src="/icons/subtitles_gray.svg" alt="/icons/subtitles_gray.svg" width="40px" /> K

want to use API to take screenshots of multiple URLs. But I can't understand the content below. Can you explain this and help me learn to use microlink API to take screenshots?

{

screenshot Type: <boolean> Default: false It generates a screenshot over the target url.

• CLI
• JavaScript
• Shell
• Python
• Ruby When it's enabled, a new screenshot data field will be part of the response payload.

{
  "data": {
    "screenshot": {
      "url": "<https://microlink-cdn.s3.amazonaws.com/s/pjzG_NocJqnd2U/Ef2b6g9P944wI_>",
      "width": 1920,
      "height": 1080,
      "type": "jpg",
      "size": 284037,
      "size_pretty": "284 kB"
    }
  },
  "status": "success"
}

You can configure different specific options, such as element or overlay:

• CLI
• JavaScript
• Shell
• Python
• Ruby Also, combine it with embed for inserting it as HTML markup and refresh it asynchronously in the background (known as stale).

<!-- Meta & SEO Tags  -->
<meta
  name="image"
  content="<https://api.microlink.io?url=https://www.netflix.com/title/80057281&screenshot=true&meta=false&embed=screenshot.url>"
/>
<meta
  itemprop="image"
  content="<https://api.microlink.io?url=https://www.netflix.com/title/80057281&screenshot=true&meta=false&embed=screenshot.url>"
/>
<meta
  property="og:image"
  content="<https://api.microlink.io?url=https://www.netflix.com/title/80057281&screenshot=true&meta=false&embed=screenshot.url>"
/>
<meta
  name="twitter:image"
  content="<https://api.microlink.io?url=https://www.netflix.com/title/80057281&screenshot=true&meta=false&embed=screenshot.url>"
/>

<!-- regular HTML Tags  -->
<img
  src="<https://api.microlink.io?url=https://www.netflix.com/title/80057281&screenshot=true&meta=false&embed=screenshot.url>"
/>

or inside CSS stylesheets:

.screenshot {
  background-image: url(<https://api.microlink.io?url=https://www.netflix.com/title/80057281&screenshot=true&meta=false&embed=screenshot.url>);
}

even in Markdown:

![Screenshot](<https://api.microlink.io?url=https://www.netflix.com/title/80057281&screen>

}

</aside>