如何将GitHub的opensea-js项目导入JavaScript Web应用中使用

场景1：使用Vue/React/Vite/Webpack等构建工具的前端项目 #

这种场景你已经完成了npm安装的步骤，直接在项目的业务代码中按如下步骤使用即可：

• 第一步：导入依赖，和你之前在脚本中用的导入语法一致

import { OpenSeaPort, Network } from 'opensea-js'

• 第二步：初始化OpenSeaPort实例，Web端需要传入浏览器钱包（如MetaMask）注入的ethereum对象作为provider，需要先触发钱包连接逻辑拿到授权

// 先判断用户是否安装了MetaMask
if (!window.ethereum) {
  alert('请先安装MetaMask钱包')
  return
}
// 触发钱包连接，请求账户授权
await window.ethereum.request({ method: 'eth_requestAccounts' })
// 初始化OpenSeaPort实例，示例为Goerli测试网，主网对应Network.Mainnet
const seaport = new OpenSeaPort(window.ethereum, {
  networkName: Network.Goerli,
  apiKey: '你的OpenSea API密钥' // 可选，生产环境建议申请API密钥避免调用限制
})

• 第三步：调用对应功能，示例为获取指定地址的资产列表

const assets = await seaport.api.getAssets({
  owner: '要查询的钱包地址',
  limit: 10
})
console.log('查询到的资产:', assets)

场景2：无构建工具，直接在原生HTML中使用 #

你可以直接通过公共静态资源CDN平台引入opensea-js的UMD格式包，无需npm安装和构建工具：

<!-- 引入opensea-js UMD包，版本号可根据需要替换为最新版 -->
<script src="对应CDN资源地址"></script>
<script>
// 依赖会挂载到全局window.openseaJs对象上
const { OpenSeaPort, Network } = window.openseaJs

// 后续初始化和调用逻辑和场景1完全一致
async function init() {
  if (!window.ethereum) {
    alert('请先安装MetaMask钱包')
    return
  }
  await window.ethereum.request({ method: 'eth_requestAccounts' })
  const seaport = new OpenSeaPort(window.ethereum, {
    networkName: Network.Goerli
  })
  // 调用功能
  const assets = await seaport.api.getAssets({
    owner: '目标钱包地址',
    limit: 10
  })
  console.log(assets)
}
</script>

注意事项 #

• 调用OpenSea接口前建议申请专属API密钥，否则会有调用频率限制
• 直接在前端调用OpenSea接口可能出现跨域问题，生产环境建议通过后端代理转发API请求

内容的提问来源于stack exchange，提问作者MarWo22