How to Integrate AI in Chrome DevTools to Automate Website SEO Analysis

Chrome DevTools is a powerful tool for web development and debugging, and it also offers basic SEO inspection capabilities out of the box. However, it lacks integrated AI capabilities to solve more complex SEO tasks. In this guide, we’ll fix that by integrating AI via ChatGPT and Gemini APIs directly into DevTools — enabling automated content analysis, keyword extraction, and more.

Whether you prefer OpenAI’s ChatGPT or Google’s Gemini, both APIs can be used to enhance your SEO workflow right inside your browser.

Why Add AI to DevTools?

Before we begin, it’s important to define the kind of tasks AI can help with.

While you can easily check things like meta tags, heading structure, or canonical links with bookmarklets like DevakaTools, it can’t analyze content quality, thematic relevance, or extract topical keywords — tasks that require natural language understanding. That’s where large language models (LLMs) come in.

Let’s use a specific example: analyzing the main topics and key phrases of a webpage’s content.

If we were using an LLM like ChatGPT or Gemini manually, we’d use a prompt such as:

“Analyze the content below. Identify the main topics discussed in it, as well as the key phrases. Provide only a list as the output, separating the topics and the most frequently used key phrases in the text.”

Now let’s automate that inside DevTools.

Using ChatGPT API Inside DevTools

1. Get Your API Key

Create an account at platform.openai.com.
Navigate to API Keys and generate your key.
Save it immediately — you won’t be able to view it again later.
You’ll also need to top up your account. A $10 credit is enough for hundreds of requests.

💡 For fast and affordable results, we recommend gpt-3.5-turbo. The newer gpt-4-turbo is much more powerful, but 20x more expensive. Model info: OpenAI Models Overview

2. Use This JavaScript Snippet in DevTools

JavaScript

const apiURL = ‘https://api.openai.com/v1/chat/completions’;
const apiKey = ‘{your-api-key}’;
const maxTextLength = 2000; // words
const maxTokens = 500;
const model = ‘gpt-3.5-turbo’;
const temperature = 0.7;
const prompt = ‘Analyze the content below. Identify the main topics discussed in it, as well as the key phrases. Provide only a list as the output, separating the topics and the most frequently used key phrases in the text. Give response in English.’;

function collectTextContent() {
    const textContent = [];
    
    const headings = document.querySelectorAll(‘h1, h2, h3, h4, h5, h6’);
    headings.forEach(heading => textContent.push(heading.textContent.trim()));
    
    const paragraphs = document.querySelectorAll(‘p’);
    paragraphs.forEach(p => textContent.push(p.textContent.trim()));
    
    const lists = document.querySelectorAll(‘ul, ol’);
    lists.forEach(list => {
        list.querySelectorAll(‘li’).forEach(item => textContent.push(item.textContent.trim()));
    });
    
    return textContent.join(‘ ‘);
}

function truncateTextToMaxTokens(text, maxTokens) {
    const words = text.split(‘ ‘);
    let truncatedText = ‘ ‘;
    for (let i = 0; i < words.length; i++) {
        if (i >= maxTokens) {
            break;
        }
        truncatedText += words[i] + ‘ ‘;
    }    
    return truncatedText.trim();
}

async function analyzeContentWithChatGPT(text) {
    const url = ‘https://api.openai.com/v1/chat/completions’;
    const truncatedText = truncateTextToMaxTokens(text, maxTextLength);

    const response = await fetch(url, {
        method: ‘POST’,
        headers: {
            ‘Content-Type’: ‘application/json’,
            ‘Authorization’: `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            model: model,
            messages: [
                { role: ‘user’, content: `${prompt}

${truncatedText}` }
            ],
            max_tokens: maxTokens,
            temperature: temperature
        })
    });

    const data = await response.json();
    if (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) {
        return data.choices[0].message.content;
    } else {
        console.error(‘Error response from ChatGPT’);
    	return (data.error ? data.error.message : “Can’t receive response from ChatGPT.”);
    }
}

async function analyzePageContent() {
    const text = collectTextContent(); 
    if (!text) {
        console.log(“Text didn’t found on the page.”);
        return;
    }
    console.log(‘Collecting text content…’);
    const analysisResult = await analyzeContentWithChatGPT(text);
    console.log(analysisResult);
}

analyzePageContent();

const apiURL = 'https://api.openai.com/v1/chat/completions';
const apiKey = '{your-api-key}';
const maxTextLength = 2000; // words
const maxTokens = 500;
const model = 'gpt-3.5-turbo';
const temperature = 0.7;
const prompt = 'Analyze the content below. Identify the main topics discussed in it, as well as the key phrases. Provide only a list as the output, separating the topics and the most frequently used key phrases in the text. Give response in English.';

function collectTextContent() {
    const textContent = [];
    
    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
    headings.forEach(heading => textContent.push(heading.textContent.trim()));
    
    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(p => textContent.push(p.textContent.trim()));
    
    const lists = document.querySelectorAll('ul, ol');
    lists.forEach(list => {
        list.querySelectorAll('li').forEach(item => textContent.push(item.textContent.trim()));
    });
    
    return textContent.join(' ');
}

function truncateTextToMaxTokens(text, maxTokens) {
    const words = text.split(' ');
    let truncatedText = ' ';
    for (let i = 0; i < words.length; i++) {
        if (i >= maxTokens) {
            break;
        }
        truncatedText += words[i] + ' ';
    }    
    return truncatedText.trim();
}

async function analyzeContentWithChatGPT(text) {
    const url = 'https://api.openai.com/v1/chat/completions';
    const truncatedText = truncateTextToMaxTokens(text, maxTextLength);

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            model: model,
            messages: [
                { role: 'user', content: `${prompt}

${truncatedText}` }
            ],
            max_tokens: maxTokens,
            temperature: temperature
        })
    });

    const data = await response.json();
    if (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) {
        return data.choices[0].message.content;
    } else {
        console.error('Error response from ChatGPT');
    	return (data.error ? data.error.message : "Can't receive response from ChatGPT.");
    }
}

async function analyzePageContent() {
    const text = collectTextContent(); 
    if (!text) {
        console.log("Text didn't found on the page.");
        return;
    }
    console.log('Collecting text content...');
    const analysisResult = await analyzeContentWithChatGPT(text);
    console.log(analysisResult);
}

analyzePageContent();

3. Save the Script as a Snippet in DevTools

Open DevTools → Sources tab
Go to the Snippets panel
Click + New Snippet, paste the code, and name it
Right-click → Run, or press Ctrl + Enter / Cmd + Enter to execute

You’ll now see AI-powered content insights directly in your console.

Using Gemini API Inside DevTools

Google’s Gemini API works similarly to OpenAI’s, with minor syntax differences. Here’s how to use it:

1. Get Your Gemini API Key

Visit Google AI Studio to generate your key.

The API endpoint will look like:

https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=YOUR_API_KEY

2. JavaScript Snippet for Gemini API

JavaScript

const model = ‘gemini-2.0-flash’;
const apiKey = ‘{your-api-key}’;
const apiURL = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
const maxTextLength = 2000; // words
const temperature = 0.7;
const prompt = ‘Analyze the content below. Identify the main topics discussed in it, as well as the key phrases. Provide only a list as the output, separating the topics and the most frequently used key phrases in the text. Give response in English.’;

function collectTextContent() {
    const textContent = [];

    const headings = document.querySelectorAll(‘h1, h2, h3, h4, h5, h6’);
    headings.forEach(heading => textContent.push(heading.textContent.trim()));

    const paragraphs = document.querySelectorAll(‘p’);
    paragraphs.forEach(p => textContent.push(p.textContent.trim()));

    const lists = document.querySelectorAll(‘ul, ol’);
    lists.forEach(list => {
        list.querySelectorAll(‘li’).forEach(item => textContent.push(item.textContent.trim()));
    });

    return textContent.join(‘ ‘);
}

function truncateTextToMaxTokens(text, maxTokens) {
    const words = text.split(‘ ‘);
    return words.slice(0, maxTokens).join(‘ ‘);
}

async function analyzeContentWithGemini(text) {
    const truncatedText = truncateTextToMaxTokens(text, maxTextLength);

    const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;

    const payload = {
        contents: [
            {
                role: “user”,
                parts: [
                    {
                        text: `${prompt}\n\n${truncatedText}`
                    }
                ]
            }
        ],
        generationConfig: {
            temperature: temperature,
            topK: 1,
            topP: 1
        }
    };

    const response = await fetch(url, {
        method: ‘POST’,
        headers: {
            ‘Content-Type’: ‘application/json’
        },
        body: JSON.stringify(payload)
    });

    const data = await response.json();

    if (data.candidates && data.candidates[0] && data.candidates[0].content && data.candidates[0].content.parts) {
        return data.candidates[0].content.parts.map(part => part.text).join(‘\n’);
    } else {
        console.error(‘Error response from Gemini API’, data);
        return (data.error?.message || ‘No response from Gemini API.’);
    }
}

async function analyzePageContent() {
    const text = collectTextContent();
    if (!text) {
        console.log(“No text found on the page.”);
        return;
    }
    console.log(‘Collecting text content…’);
    const analysisResult = await analyzeContentWithGemini(text);
    console.log(analysisResult);
}

analyzePageContent();

const model = 'gemini-2.0-flash';
const apiKey = '{your-api-key}';
const apiURL = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
const maxTextLength = 2000; // words
const temperature = 0.7;
const prompt = 'Analyze the content below. Identify the main topics discussed in it, as well as the key phrases. Provide only a list as the output, separating the topics and the most frequently used key phrases in the text. Give response in English.';

function collectTextContent() {
    const textContent = [];

    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
    headings.forEach(heading => textContent.push(heading.textContent.trim()));

    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(p => textContent.push(p.textContent.trim()));

    const lists = document.querySelectorAll('ul, ol');
    lists.forEach(list => {
        list.querySelectorAll('li').forEach(item => textContent.push(item.textContent.trim()));
    });

    return textContent.join(' ');
}

function truncateTextToMaxTokens(text, maxTokens) {
    const words = text.split(' ');
    return words.slice(0, maxTokens).join(' ');
}

async function analyzeContentWithGemini(text) {
    const truncatedText = truncateTextToMaxTokens(text, maxTextLength);

    const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;

    const payload = {
        contents: [
            {
                role: "user",
                parts: [
                    {
                        text: `${prompt}\n\n${truncatedText}`
                    }
                ]
            }
        ],
        generationConfig: {
            temperature: temperature,
            topK: 1,
            topP: 1
        }
    };

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
    });

    const data = await response.json();

    if (data.candidates && data.candidates[0] && data.candidates[0].content && data.candidates[0].content.parts) {
        return data.candidates[0].content.parts.map(part => part.text).join('\n');
    } else {
        console.error('Error response from Gemini API', data);
        return (data.error?.message || 'No response from Gemini API.');
    }
}

async function analyzePageContent() {
    const text = collectTextContent();
    if (!text) {
        console.log("No text found on the page.");
        return;
    }
    console.log('Collecting text content...');
    const analysisResult = await analyzeContentWithGemini(text);
    console.log(analysisResult);
}

analyzePageContent();

Save & Run as Snippet

Same as with ChatGPT: save it in DevTools → Sources → Snippets, and run it anytime on any page.

The output will differ slightly based on the model you use, but both will give you actionable SEO insights.

Now You’re AI-Enhanced

You now have an AI assistant living inside your browser, helping you analyze page content with a single click. You can go even further by:

Customizing prompts for tone or technical depth
Sending structured data (e.g. JSON) from page content
Using your own fine-tuned models
Combining results with other automation workflows

Found This Useful?

If you found this DevTools + AI hack useful, consider sharing the article on social media or with your SEO/tech colleagues. It might just supercharge someone’s workflow!

Post Views: 1,608

Comments

3 responses to “How to Integrate AI in Chrome DevTools to Automate Website SEO Analysis”

Dean Warwick

May 31, 2025

Thankyou! This is something that is genuinely useful and will help my work flow a lot!

Can’t believe I’m the first comment here!

Much appreciated!

1. devaka
  
  June 1, 2025
  
  Dean, thanks so much for the kind words! Wishing you smooth and productive workflows ahead.
  
Hollie

June 3, 2025

Very cool – I tried it and it worked. It gives me different output when I use it multiple times – but that’s how it is with AI-generated answers.
I’m very excited to reworking the prompt input and get more information or suggestions for my SEO work.