Red Hat Training

A Red Hat training course is available for OpenShift Container Platform

39.2. 加载扩展脚本和 Stylesheets

只要可从浏览器中访问 URL，就可以在任何 https:// URL 中托管扩展脚本和样式表。文件可以使用公开访问的路由，或 OpenShift Container Platform 之外的其他服务器上，从平台上的 pod 托管。

要添加脚本和风格表，请编辑 openshift-web-console 命名空间中的 webconsole-config ConfigMap。Web 控制台配置包括在 ConfigMap 的 webconsole-config.yaml 键中。 

$ oc edit configmap/webconsole-config -n openshift-web-console

要添加脚本，请更新 extensions.scriptURLs 属性。值是 URL 的数组。

要添加风格表，更新 extensions.stylesheetURLs 属性。值是 URL 的数组。

extensions.stylesheetURLs 设置示例

apiVersion: v1
kind: ConfigMap
data:
  webconsole-config.yaml: |
    apiVersion: webconsole.config.openshift.io/v1
    extensions:
      scriptURLs:
        - https://example.com/scripts/menu-customization.js
        - https://example.com/scripts/nav-customization.js
      stylesheetURLs:
        - https://example.com/styles/logo.css
        - https://example.com/styles/custom-styles.css
    [...]

保存 ConfigMap 后，Web 控制台容器将在几分钟后自动更新新扩展文件。

注意

脚本和样式表必须以正确的内容类型提供，否则不会由浏览器运行。脚本必须使用 Content-Type: application/javascript，样式表为 Content-Type: text/css。

最佳实践是将扩展脚本嵌套在 Immediately Invoked function Expression(IIFE)中。这样可确保您不会创建与 web 控制台或其他扩展所使用的名称冲突的全局变量。例如： 

(function() {
  // Put your extension code here...
}());

以下部分中的示例显示了您可以自定义 Web 控制台的常见方法。

注意

GitHub 上的 OpenShift Origin 存储库中提供了额外的扩展示例。

39.2.1. 设置扩展属性

如果您有一个特定的扩展，但要为每个环境使用不同的文本，您可以在 web 控制台配置中定义环境，并跨环境使用相同的扩展脚本。

要添加扩展属性，请编辑 openshift-web-console 命名空间中的 webconsole-config ConfigMap。Web 控制台配置包括在 ConfigMap 的 webconsole-config.yaml 键中。 

$ oc edit configmap/webconsole-config -n openshift-web-console

更新 extensions.properties 值，它是键值对映射。 

apiVersion: v1
kind: ConfigMap
data:
  webconsole-config.yaml: |
    apiVersion: webconsole.config.openshift.io/v1
    extensions:
      [...]
      properties:
        doc_url: https://docs.openshift.com
        key1: value1
        key2: value2
    [...]

这会生成一个全局变量，它由扩展访问，就像执行以下代码一样： 

window.OPENSHIFT_EXTENSION_PROPERTIES = {
  doc_url: "https://docs.openshift.com",
  key1: "value1",
  key2: "value2"
}