能否用JS提取指定Bitbucket页面的特定链接并在当前HTML展示？

一、直接用前端JavaScript无法实现 #

浏览器的同源策略会阻止前端脚本直接请求其他域名（比如bitbucket.org）的页面内容，所以你没法在自己的HTML文档里用前端JS直接获取并解析该Bitbucket页面的链接。

二、可行的替代方法 #

1. 后端脚本中转 #

写一个后端服务（用Node.js、Python等语言），先由后端请求Bitbucket的目标页面，解析HTML提取符合要求的链接，再把结果返回给前端页面展示。

• Python示例（用requests+BeautifulSoup）：

import requests
from bs4 import BeautifulSoup

url = "https://bitbucket.org/alceawisteria/ostr/issues"
response = requests.get(url)
soup = BeautifulSoup(response.text, "html.parser")

# 提取所有class为execute的a标签链接
links = [a["href"] for a in soup.find_all("a", class_="execute")]

# 可以把links生成HTML内容，或者返回给前端
print(links)

• Node.js示例（用axios+cheerio）：

const axios = require('axios');
const cheerio = require('cheerio');

async function getLinks() {
  const response = await axios.get('https://bitbucket.org/alceawisteria/ostr/issues');
  const $ = cheerio.load(response.data);
  
  const links = [];
  $('a.execute').each((i, el) => {
    links.push($(el).attr('href'));
  });
  
  console.log(links);
  // 后续可将links返回给前端
}

getLinks();

2. 浏览器扩展实现 #

浏览器扩展拥有更高的跨域权限，可以绕过同源策略。你可以写一个简单的扩展：

• 在扩展的后台脚本中请求Bitbucket页面，解析提取链接；
• 把提取到的链接注入到当前页面的DOM中展示，或者通过扩展的弹窗展示。

3. 本地脚本生成HTML #

直接在本地运行脚本（比如Python、Node.js），提取链接后生成包含这些链接的HTML文件，然后打开该文件查看结果。

三、关于GitHub Issue Widget的说明 #

GitHub Issue Widget能工作是因为它调用了GitHub官方提供的API，或者使用了GitHub允许的嵌入机制，并非直接跨域爬取HTML页面。Bitbucket也有官方API，如果你能通过API获取issue数据，也可以类似实现，但你现在的需求是提取特定class的链接，还是需要解析HTML的话，就得用上面的方法。

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