从 Chrome 扩展内容脚本修改 Angular 菜单栏

Question

我一直在开发一个扩展程序（目前仅限谷歌浏览器），它应该为我学校的在线学习环境添加功能。 这个网站（实际上不是学校自己运营的）前端使用Angular 。

对于扩展，我使用Typescript和Parcel 。 在网页上运行的脚本是内容脚本。

我正在尝试向左侧的菜单栏添加一个项目。 这是我试过的：

• 将纯 HTML 插入ul元素，但这会破坏整个菜单栏，用户之后无法使用它。

• 在content-script中使用Angular（通过NPM安装）找到menu-bar元素的scope，然后添加新选项（Menu-bar是一个数组），然后应用它。 虽然这似乎也行不通，就像这样：

  预期行为（使用浏览器控制台）

   let target = document.getElementsByClassName("main-menu")[0]; let menu = angular.element(target); console.log(menu); >>> p.fn.init [ul.main-menu, context: ul.main-menu]

  收到的行为（来自内容脚本）

   let target = document.getElementsByClassName("main-menu")[0]; let menu = angular.element(target); console.log(menu); >>> p.fn.init [ul.main-menu]

  缺少上下文让我觉得我的内容脚本和网页脚本没有在同一个 scope 中运行。这是正确的吗？ 我也无法在内容脚本中使用.scope()方法。

这是我的插件manifest.json json。 请告诉我

{
    "name": "Magister Plus",
    "description": "TBD",
    "version": "0.0.1",
    "manifest_version": 3,
    "permissions": [
        "activeTab",
        "scripting",
        "tabs"
    ],
    "background": {
        "service_worker": "./background/background.js"
    },
    "host_permissions": [
        "https://*.magister.net/*"
    ],
    "content_scripts": [
        {
            "matches": ["https://*.magister.net/*"],
            "js": ["./content/domain.js"]
        },
        {
            "matches": ["https://*.magister.net/magister/#/vandaag"],
            "js": ["./content/vandaag.js"]
        }
    ],
    "action": {}
}

我不太确定在这里做什么，因为我根本不熟悉 Angular.js。

谢谢你的帮助！

Answer 1

1. 要更改 html，您需要使用 appendChild 或 insertAdjacentHTML，但不能使用 innerHTML。 2）要访问上下文属性，您需要在页面上下文中运行该部分代码。 通过@wOxxOm

这确实有效！ 太感谢了！