Extensie Chrome – Simple Content Script pentru a rula js pe orice pagină (Programare, Javascript, Google Chrome)

user2876479 a intrebat.

Cum pot scrie un script de conținut simplu de extensie Chrome Extension care va executa JavaScript (de exemplu alert("hello");) la fiecare încărcare a paginii?

Deci, atunci când navighez pe o pagină sau reîncarc o pagină, JavaScript ar trebui să ruleze.

Acesta este manifest.json fișier până în prezent:

{
    "name": "Highlight some phrases",
    "description": "Hightlight some pre defined text from websql database after page loads",
    "version": "0.1",
    "permissions": [
        "tabs","<all_urls>"
    ],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },

    "content_scripts": [
        {
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "js": ["content.js"]
        }
    ],

    "background": {
        "page": "background.html" 
    },

    "manifest_version": 2
}

Comentarii

  • îmi pare rău pentru postarea mea. codurile arată ciudat… aceasta este prima mea postare. –  > Por user2876479.
  • { „name”: „Evidențiați unele fraze”, „description”: „Evidențiază unele texte predefinite din baza de date websql după încărcarea paginii”, „version”: „0.1”, „permisiuni”: [ „tabs”,”<all_urls>” ], „browser_action”: { „default_icon”: „icon.png”, „default_popup”: „popup.html” }, „content_scripts”: [ { „matches”: [ „http://*/*”, „https://*/*” ], „js”: [„content.js”]] } ] ], „background”: { „page”: „background.html” }, „manifest_version”: 2 } –  > Por user2876479.
  • Site-ul JavaScript personalizat pentru site-uri web Extensie Chrome ar putea fi de ajutor. Aceasta vă permite să injectați propriile scripturi personalizate în anumite pagini pe care le alegeți, inclusiv în cele care se bazează pe jQuery. –  > Por Andris.
1 răspunsuri
yakiang

Dacă tot ce ai nevoie este să alertezi hello la fiecare încărcare sau reîncărcare a paginii, mai jos este un demo simplu: Manifest.json:

{
    "name": "Highlight some phrases",
    "description": "Hightlight some pre defined text after page loads",
    "version": "0.1",
    "permissions": [
        "tabs","<all_urls>"
    ],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "content_scripts": [
        {
        "matches": [
            "http://*/*",
            "https://*/*"
            ],
        "js": ["content.js"],
        "run_at": "document_end"    // Pay attention to this line
        }
    ], 
    "manifest_version": 2
}

și content.js:

// alert("hello");
document.body.style.background = 'yellow';

Da, este suficient.
Și, bineînțeles, nu uitați să adăugați o pictogramă numită icon.png în același director cu aceste două fișiere, apoi testați-o în Google Chrome.

Comentarii

  • Uau, este uimitor… Ați putea să mă ajutați, vă rog, dacă vreau să schimb culoarea de fundal în, de exemplu, galben. Cum pot face acest lucru? –  > Por user2876479.
  • Am editat răspunsul meu, dar nu va funcționa întotdeauna perfect, deoarece site-urile vor fi afectate și de propriile coduri js. Ar trebui să vă uitați cu adevărat la tutoriale de pe Google aici. Acum mă duc să dorm. (1:30 am aici). 🙂 @user2876479 –  > Por yakiang.
  • Mulțumesc yakiang, Au trecut ani de zile de când am vrut să dezvolt niște extensii utile pentru Chrome. dar au trecut doar 2-3 zile de când am început. și Im’ începe să înțeleg un pic acum. Așa că întrebarea mea ar putea fi o prostie… M-am gândit că ar putea fi nevoie să folosesc niște comenzi precum „chrome.extension.onRequest.addListener”. Din moment ce am și un popup, acest simplu cod de stilizare va avea efect asupra html-ului popup-ului sau asupra html-ului filei. Încă trebuie să aflu atât de multe despre extensii. Voi încerca cu siguranță acestea acum. și voi împărtăși experiențele mele aici cât mai curând posibil. –  > Por utilizator2876479.
  • și vă rugăm să nu vă editați codul… Acestea vor fi foarte utile pentru cineva ca mine, care sunt începători… –  > Por user2876479.
  • The content_scripts > se potrivește suportă, de asemenea, proprietatea <all_urls> astfel încât nu trebuie să vă deranjați cu mai multe modele pentru http, https etc. Doar faceți: "matches": ["<all_urls>"], care se va potrivi cu lucruri precum file:/// la fel de bine. –  > Por Joel Mellon.