如何在Chrome扩展选项页中加载OpenUI5框架并调用相关API

1. 调整扩展 manifest 配置，放开CSP限制 #

Chrome扩展默认的内容安全策略禁止了OpenUI5运行必需的动态脚本执行特性，根据你使用的manifest版本修改配置：

• Manifest V3 配置示例（在manifest.json中添加/修改如下字段）：

{
  "manifest_version": 3,
  // 其他原有配置保持不变
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src 'self' 'unsafe-inline';"
  },
  "web_accessible_resources": [
    {
      "resources": ["resources/*"],
      "matches": ["<all_urls>"]
    }
  ]
}

• Manifest V2 配置示例：

{
  "manifest_version": 2,
  // 其他原有配置保持不变
  "content_security_policy": "script-src 'self' 'unsafe-eval' 'unsafe-inline'; object-src 'self'"
}

2. 修正OpenUI5 bootstrap配置 #

在option.html中修改UI5的启动脚本，添加CSP适配配置，调整加载逻辑：

<!DOCTYPE html>
<html>
<head>
  <title>My Test Extension Options</title>
</head>
<body>
  <script
    id="sap-ui-bootstrap"
    src="/resources/sap-ui-core.js" 
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-preload="sync"
    data-sap-ui-csp="true"
  >
  </script>
  <!-- 移除原来的内联sap初始化脚本，把所有UI5相关逻辑放到options.js中 -->
  <script type="text/javascript" src="options.js"></script>
  Favorite color:
  <select id="color">
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    <option value="yellow">yellow</option>
  </select>

  <label>
    <input type="checkbox" id="like">
  </label>
  <button id="save">Save</button>
</body>
</html>

注意：你下载的完整OpenUI5包的resources文件夹需要放在扩展项目根目录，和manifest.json同级，保证资源路径正确。

3. 调整options.js执行逻辑 #

因为UI5加载完成前sap全局对象还未初始化，需要确保逻辑在UI5初始化完成后执行：

// 等待UI5核心初始化完成
sap.ui.getCore().attachInit(function () {
  alert("UI5 is ready");
  // 后续你的其他业务逻辑都可以写在这里
});

以上配置完成后重新加载扩展即可正常运行。

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