Google Chrome extension add a header to every webpage - google-chrome-extension

I was wondering if it is possible to add a nonchanging header to every webpage you go to. I know you can do infobars but as it is still experimental I would like to avoid using it if possible. The header would contain a title I put in along with some buttons.

Yes its possible. You need to do it in a way that you minimally modify the dom structure. If you just prepend to body you could break code that finds elements relative to body.
Try instread something like changing body top margin then appending a div on absolute position 0,0. Since its at the end of the dom it shouldnt affect tab order or code relying on structure.

Related

How do i fill Text with objects?

newbie here. I want to code a website by myself with html, css and javascript. Is there any way I can use the outline of a text as a "barrier" and fill the inside of the letters with objects?
Objects like those on this website: https://www.fullbundle.com/
I want those objects to be interactive to the cursor, so they only become visible if you hover over the text. Like a rippling hover effect but with objects inside.
I already tried to find an answer by myself by inspecting similar websites but I couldn't find a solution
In the next step, I want to make a scrolling effect. When the filled text gets in touch with the top of my display it bursts and the objects inside are flying all over the place.
I know it's very much for a beginner but I am curious about how it's done.

JS: make browser select-all (Chrome, at least)

I am playing around various ways to try circumvent Cross-origin issues when loading (node, not img) SVG into a local html file. There's no reason I can't just simply use a web-server, but this is for fun/educational purposes.
So, current experiment is this: inside the SVG which is embedded via <object> tag, I have a script which makes a new <text> and writes the entire SVG there. The idea was to write it down, delete all other nodes and make a select-all copy the entire text in the window (it's a pop-up window) and then return to original HTML document to paste the text in and then make my inline SVG!
The parts I have working are all the way up to the 'select-all' piece. I know that we have the ability to select text out of a <textarea> with .select(), but inside of SVG that's not a thing. Now I'm stumped whether it's even possible to dispatch the Cmd+A keys , or anything, in order to get the browser to select-all.
Alternatively I can just change the .svg to '.txt' which would make my pop-up-copy strategy at least work past the select-all part, but if it takes post-processing my svg manually then it defeats the purpose of these experimentations!
Ideas welcome! :)

Google Chrome Extension Development

I am developing a chrome extension that would like to add a tab at the bottom of the page to manipulate DOM elements. Chrome 'manifest.json' file doesn't provide such feature. So how to do it or rather how does Firebug add a tab at the bottom of the Chrome?
I would suggest inserting a panel in every page through a content script. You can style it in order to appear at the bottom of the page and be always visible.
In order for it to retain its state between navigation from one page to another, you need to persist it some how (example use chrome.storage or a similar mechanism through the background page to persist the content (or whatever you need).
See this answer on how to insert (and style) a toolbar-like div or iframe in a page through a content script. (It is fixed to the top of the page, but you can easily modify the code to fix its position at the bottom.)

How do you alter the 'page_load' for DotNetNuke

For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.
I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.
My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?
My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want
As for where to place the markup there are a few places
You can do it directly in the skin files (not suggested since you may have to edit a few files)
in the skin .css files (much better place to do it and more maintainable and portable)
in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)
Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons
You could use Javascript within the skin.
We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.
Google does though :)
I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.
Solved it, not as dynamic as I'd like, but it works.
The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.
Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!

Digg/Stumbleupon Bar

I'm looking to see if it's possible to implement a "bar" like you guys have, along with Digg, Stumble upon and other websites.
I have no idea what it's even called - frameset, iframe of sorts but I can't even think of a proper title to search google..
Can you help?
You can have a normal div tag (or whatever tag you want to use) with CSS position property set to 'fixed'. Then the element can be positioned where ever you want and scrolling the page doesn't affect the position.

Resources