通过Firefox插件在特定/通配符URL上注入JavaScript / CSS

Question

I've seen similar questions on here, but none really answered my questions...

1. How to check if the url matches a string. This part would be easy, but there's a catch... I need a wildcard: eg " google.com/search* " where it would trigger no matter what comes after "search".

2. How to then apply that idea to a Firefox add-on WITHOUT using any XUL (it seems the only thing add-on tutorials teach you is how to deal with XUL add-ons ffs). All I want to do is inject my personal JS/CSS into these pages without having to deal with anything overly complicated.

Chrome makes this stupidly easy to do via the manifest, but I have very limited knowledge of Firefox addon development (and JavaScript in general, actually). Any links that could help me would be great too; I don't mind reading, I just need to know WHERE to read!

Answer 1

You need String.prototype.indexOf to determine if that string is contained within your search.

if (-1 !== 'google.com/search/oreo') {
    console.log("Jackpot");
}

However this will trigger even when the string is somewhere else in your string, like:

if (-1 !== 'https://unrlelated.domain.com/blog/google.com/search/oreo') {
    console.log("False alert");
}

For more control, you need regular expressions .

if (null !== /^http(s?):\/\/(www\.)?google\.com\/search/i) {
    console.log("Yay, it starts with google.com!");
}

For injecting something between you might use String.prototype.replace . As for how, I'll leave it as an exercise

As you might've seen I've linked mdn a few times. It's great resource, all you have to do is to google "mdn keyword" and you'll have almost the best explanation there.

Answer 2

Are you using Firefox Add-SDK? Or doing pure bootstrap addon?

If you are using add-sdk its incredibly easy as well.

var contentScriptString = '$("body").html("<h1>Page matches ruleset</h1>");';

pageMod.PageMod({
  include: "*.mozilla.org",
  contentScript: contentScriptString,
  contentScriptFile: data.url("jquery.js")
});

This will match anything that ends with *.mozilla.org

So you would do include: "http://www.google.com/search*"

Read all about the dumbed down pattern matching used in add-on sdk which is still pretty powerful: MDN :: Add-on SDK - Modifying Web Pages Based on URL