The project I've been working on involves creating an extension specifically for Google Chrome to enhance my school's online learning platform. This website, which is not managed by the school itself, utilizes Angular for its front-end design.
Within the extension, I am utilizing Typescript along with Parcel, and employing content-scripts to run scripts on the webpages. My goal is to add an item to the menu-bar located on the left side of the screen. So far, I have attempted a couple of methods:
Initially, I tried inserting pure HTML directly into the
ulelement of the menu-bar, but this action ended up breaking the entire functionality of the menu, rendering it unusable for the user.Another approach I took was using Angular (installed via NPM) in the content-script to locate the scope of the menu-bar element, adding a new option to the array of the menu-bar, and applying it. However, this method also failed to yield the desired results. Here's a snippet showcasing the expected vs. received behavior:
Expected behavior (using browser console)
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]Received Behavior (from content-script)
let target = document.getElementsByClassName("main-menu")[0]; let menu = angular.element(target); console.log(menu); >>> p.fn.init [ul.main-menu]This discrepancy in contexts leads me to believe that my content-script and the webpage’s script are not operating within the same scope. Is this assumption correct? Additionally, I have encountered difficulty utilizing the
.scope()method within the content-script.
Provided below is the contents of my manifest.json file for the plugin. Any guidance or suggestions would be greatly appreciated as I navigate through this unfamiliar territory of Angular.js.
{
"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": {}
}
I find myself at a loss regarding the next steps to take due to my limited familiarity with Angular.js. Any assistance provided would be immensely helpful. Thank you!