I am trying to use user-session recording tools (like FullStory or Livesession) in my Chrome Extension.
The way those tools work is that during the session capture, they make a copy of the page CSS to recreate the playback in the future.
The problem is that they don't collect my content script's injected CSS file:
"content_scripts": [
{
"matches": [...],
"js": [
"build/content.js"
],
"css": [
"build/content.css"
]
}
],
so the recording output is all messed up and broken.
I thought that it may be due to the CSS being injected after the JS is executed but I don't think this is the case according to this article.
How can I make it work?
Related
I'm currently making a Chrome extension that contains two different scripts. For some reason when I navigate in and out of a website listed explicitly in the matches property, the script will not function unless I refresh the page. Is there a way to get the script to load each time without needing to refresh the page?
Here is my manifest.json:
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["script.js"]
},
{
"matches": ["https://www.somewebsite/*"],
"js": ["script.js", "specificScript.js"]
}
]
My manifest looks like this:
{
"js": ["JS/jquery.min.js","checkUser.js"],
"matches": ["https://www.instagram.com/*/"],
"run_at": "document_start"
}
However, checkUser.js is always running when I'm on any sub page. I want to it to be running when it is having only one placeholder between the two slashes, such as "https://www.instagram.com/user1/", "https://www.instagram.com/user2/" and so on. Is there an efficient way to do this?
I managed to make it work by using exclude_globs by reading this site.
I'm writing a chrome extension, to do some modification to the page content, but I have to click on it to make it working on current page.
What I want is: if I click on the extension icon (to enable it), it will always enabled, no matter what new pages/tabs are open, and will work on them?
How to write code to configure it?
Using content script you can achieve this. Content scripts are files that run in the context of web pages so you can modify webpage content.
Add below code in manifest.json
{
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["your-content-script.js"]
}
],
"permissions": [
"tabs", "http://*/*","https://*/*"
]
}
To learn more, read this https://developer.chrome.com/extensions/overview.html#arch
I would like to know how to run the background script of a Chrome extension for only specific/specified domain/s please?
For example, if an extension is meant to run only on pages of Google.com, so there is no reason to keep the background script running on any other domains.
In my manifest file I have set "matches" but I can still see the background script running on every domain and tab.
...
"background": {
"matches": [
"*://*.google.com/*"
],
"scripts": ["scripts/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [
"*://*.google.com/*"
],
"css": ["styles/default.css"],
"js": ["scripts/jquery.js", "scripts/default.js"]
}
],
"permissions": [
"storage",
"declarativeContent",
"tabs"
],
...
Edit
To add more info that will help understand my goal:
I have a content script and a popup, the popup is being used as a remote control with options to choose from and play with, that will eventually effects the page.
When changing an option in the popup, it sends it's value to the background/event script, there it being temporary saved in a variable, and then being sent to the content script, where it actually being executing and show up on the page to the user.
And I want that only when the user leaves the specific domain, the background/event script will save the settings to storage, so by that there will be only a single storage saving task and NOT each time the user is changing a setting in the popup.
After the settings got saved to storage and the user left, I want nothing to run it the background anymore please.
You are misunderstanding what the background page is for, and what "persistent": false means.
The background page does not run "for" any domain; it just runs. A single copy per extension. Have a look at the Architecture Overview.
However, if you are concerned that it consumes resources, you add "persistent": false to the manifest. This makes it an Event page, that is unloaded when it's not doing work.
If your event page is woken up only by content scripts, then you have achieved your goal: it won't be running when it's not needed.
It's entirely up to you to properly construct the background page so it's idle when you don't need it. Since you haven't told what it's supposed to be doing - well..
Do read the Event page documentation, there are important restrictions you need to understand.
Let me explain. My chrome extension consists of this:
Injecting an html page in an iframe
Inside this html page is another iframe sourced to an external site
This external site is being modified by the extension also
The problem is I am not seeing the effects I should be. How do I specify I want to display the version of my site affected by the extension?
Edit: Here is the exact part of the code that Im working with:
<iframe id="wikiforum" src="http://mudandblood.net/html/modules.php?name=Forums"></iframe>
That url its currently pointing to is also having css and js injected into it by my extension. Everything works how it should when I visit the site directly, but through the iframe it remains unchanged. Thats what I'm trying to fix.
2nd Edit: Yes, I am injecting the content scripts through the manifest. Like so:
{
"name": "MnB2+",
"version": "1",
"manifest_version": 2,
"content_scripts": [
{
"js": ["contentscript.js"],
"matches": ["http://mudandblood.net/mudandblood2.swf","http://www.mudandblood.net/mudandblood2.swf"],
"all_frames": true
},
{
"css": ["style.css"],
"js": ["csforum.js"],
"matches": ["http://mudandblood.net/html/*"]
}
],
"permissions": [
"tabs"
],
"web_accessible_resources": [
"irc.html",
"wiki.html",
"style.css",
"vectors/*.svg"
]
}
So I'm a dolt and a noob, I solved my own problem. Downvote me as you will, I apologize sincerely. Wouldn't have figured it out though if I didn't post here.
The key was I didn't include "all_frames": true in the second content script section. Hope this at least helps another newbie on the way.