I would like to know if it is possible to add a content script file to a local extension file named for example "test.html", I tried the following but I can not get it to work :
"content_scripts": [
{
"matches": ["popup/test.html"],
"all_frames":true,
"js": ["js/content_script_test.js"]
}
]
I am trying to do this because I would like to be able to use Message Passing from my background script.
You don't need a content script for this, APIs like browser.runtime.sendMessage() and browser.runtime.onMessage.addListener() are available in extension pages, including popups.
Related
I have a Visual Studio Code project with lots of files in lots of subfolders. As I am working on my code I need to navigate back and forth through all of these different (sub-)locations which is very tedious. Is there a way to save links to files to quickly access them?
With the extension HTML Related Links you can create a file with relative paths to files and have a Related Links View in the Explorer bar. This View can be locked to the file with the links.
Create a file in the workspace root: filelinks.txt
file: subdir1/file1.py
file: subdir1/file2.py
file: subdir2/file3.json
file: subdir2/file4.xml
You can add line numbers at the end of the filepath: #123
Add the following setting:
"html-related-links.include": {
"plaintext": [
{ "find": "file:\\s+((?!.*?#).+?)" },
{ "find": "file:\\s+((?=.*?#).+?)#(\\d+)", "lineNr": "$2" }
]
}
When you view the file filelinks.txt, press the lock button in the Related Links View
When you add or remove files the view is updated.
You can close the editor for filelinks.txt when you have locked the file. When you want to change the list open filelinks.txt again.
I have few images in my storage folder(laravel), I want to view them in my React data table. Apparently it only displays the path name of the image.
First you have create symbolic link
php aritsan storage:link
this will create shortcut storage folder in public folder
so you can access url
https:://urdomain/storage/filename
Here i assume your images of files exist in storage/app/public.If your files contain in any subfolder then it should be
https:://urdomain/storage/subfoldername/filename.extension
ref:https://laravel.com/docs/8.x/filesystem#the-public-disk
Also in reactjs if you are getting json response like this
{
"id": 23532,
"name": "john",
"image": "images/image.jpeg",
},
then you might need to append baseurl
<img src="https:://urdomain/storage/{image}" alt='image' width='100%'/>
Also you refer this answer :
Image not showing from Django rest api in Reactjs
Is there any way to load separate sets of snippets depending on if I'm developing, for example, a react project vs. a react native project?
Basically, when I hit my keybinding (ctrl+shift+b), it should fill out my Button snippet, which is different for each:
react: "<button className=''>$1</button>",
react-native: "<Button title='$1' onPress={()=>{}}/>",
Right now I have a silly workaround where I use .jsx for web components and .js for react-native components, then configure my snippets for each language-mode accordingly, but I would prefer to use .jsx for both.
This explanation regards to all file types/snippets, the examples are
of adding react snippets.
In VSCode, snippets are loaded according to file association. You can check the current file association on the bottom bar.
Example for JavaScript React file:
Now you need to configure the snippet to the desired file type, for this you need to add files.associations property in settings.json.
File -> Preferences -> Settings -> Open Settings (JSON)
"files.associations": {
"*.react.js": "javascriptreact",
"*.stories.js": "javascriptreact",
"*.action.js": "javascriptreact",
"*.reducer.js": "javascriptreact",
"*.styles.js": "javascriptreact",
"*.jsx": "javascriptreact",
"*.js": "javascript"
}
From this point, files names like MyComponent.react.js will associate with javascriptreact type.
All is left adding your snippets to javascriptreact type:
View -> Command Palette -> Preference: Configure User Snippets
and choose a file type (if exists like javascriptreact.json or create a new file type like javascriptreactnative).
All snippets in the chosen type will associate and auto-suggests.
For example, the next snippet in javascriptreact.json will work only in React files as configured above:
"React Fragment": {
"prefix": "<>",
"body": [
"<>",
"$1",
"</>"
],
"description": "Insert React Fragment"
}
In conclusion, you need to separate .jsx extension to recognize react and react-native, for example: *.native.jsx
I'm trying to find a way to generate (with generate.py source-all) application code that is ready for running from web server (eg. Tomcat).
The only thing that prevents me from doing this is the fact that myapp.js contains filesystem URIs in libinfo object:
var libinfo = {
"__out__":{"sourceUri":"script"},
"myapp":{"resourceUri":"../source/resource","sourceUri":"../source/class"},
"qx":{
"resourceUri":"file:///C:/dev/qooxdoo-5.0.1-sdk/framework/source/resource",
"sourceUri":"file:///C:/dev/qooxdoo-5.0.1-sdk/framework/source/class",
"sourceViewUri":"https://github.com/qooxdoo/qooxdoo/blob/%{qxGitBranch}/framework/source/class/%{classFilePath}#L%{lineNumber}"
}
};
When I manually change resourceUri & sourceUri from
file:///C:/dev/qooxdoo-5.0.1-sdk/framework/source/...
to
/myapp/qooxdoo-5.0.1-sdk/framework/source/...
application page successfully loads in the browser with all the dependencies (generated sources are already in document root, and "qooxdoo-5.0.1-sdk" framework content loads due to the mapping /myapp/qooxdoo-5.0.1-sdk => C:\Dev\qooxdoo-5.0.1-sdk set up on the server).
Is there a way to tell generate.py that my SDK framework files should be accessed through an URL (/myapp/qooxdoo-5.0.1-sdk/...) instead of filesystem URI?
(I can see there are a number of "compile-options" that can be specified in config.json (qooxdoo Documentation Release 5.1: chapter 11.3.3 - Generator Config Keys), but looks like none of them solves the problem)
In your config.json you will have a "jobs" section containing a "libraries" section, containing a "library" array - your application is a library, as is Qooxdoo, as is any contribs so it will look something like this:
"jobs" : {
"libraries" : {
"=library" : [ {
"manifest" : "${QOOXDOO_PATH}/framework/Manifest.json"
}, {
"manifest" : "Manifest.json"
}
},
Each "library" object can have a "uri" property, so for your example you probably want something like this:
"jobs" : {
"libraries" : {
"=library" : [ {
"manifest" : "${QOOXDOO_PATH}/framework/Manifest.json",
"uri" : "/some/other/uri/qooxdoo-5.0.1-sdk"
}, {
"manifest" : "Manifest.json"
}
},
and then on your web server, either position the qooxdoo-5.0.1-sdk directory appropriately or create a mapping to it.
im trying to make a streaming service where i stream the content of a file (in this case a video) into a video element.
for this purpose i have downloaded and installed videogular and is now trying to set it up however im sure how to do it.
According to the documentation on videogular to load a video you would need a syntax like this:
sources: [
{src: $sce.trustAsResourceUrl(myMp4Resource), type: "video/mp4"}
]
Which is fine for when you want to load the content in without streaming.
But say for instance you have a node server running at port 8105 and the file you wish to collect had an id of 1 then the result might look something like this:
sources: [
{src: $sce.trustAsResourceUrl('http://localhost:8105/loadvideo/1'), type: "video/mp4"}
]
However in my attempt to do so it would just tell me that the resource is not an actual resource.
My question is how do you stream to a video content (preferably with videogular) and does anyone know of examples where people have made this possible?
Server side code
Okay so my initial idea (and i know this is a change for the code above) was to create a route that took at path:
router.route('/retrieveFile')
.post(function (request, response) {
var path = '../' + request.body.data;
var file = fs.createReadStream(path);
file.pipe(response);
});
And then piped the output of the file.
Then use this to stream the file
If you have video files on your harddrive and you want to serve them all with their filenames, you should just use Express Static to serve them just like any other resource
You can add a path prefix '/videos' to differentiate them from regular resources.
app.use('/videos', express.static('videos'));
Then a video file ./videos/myvid.mp4 would be available as http://localhost:8000/videos/myvid.mp4
To have a file available as a file, you need to set the appropriate headers before piping
And to load the file you'd put this code in your router, and where you're using post, if you don't have a strong reason I'd just use get or all
You might also wanna be able to end the transmission if client decides to disconnect mid-stream
Alternatively you might want to go with res.download instead of streams, which which case appropriate headers and interruptions are automatically handled.
So the whole code might look like this:
router.route('/path/to/video.mp4')
.all(function(req, res){
res.header('content-disposition', 'filename="video.mp4"')
var stream = fs.createReadStream('./resources/video.mp4');
stream.pipe(res);
require('on-finished')(res, stream.abort.bind(stream));
// or simply
res.download(fs.readSync('/path'))
});
Then you can use http://localhost:8000/path/to/video.mp4 to either directly load the video into your browser, it'll play it if it can or simply offer to download. Or you can use this URL in your videgular
sources: [ {src: $sce.trustAsResourceUrl('http://localhost:8000/path/to/video.mp4'), type: "video/mp4"} ]