5

I have a script that gets the title from a tab and assigns it to a variable. However, I need to also get the meta desc and title properties for use in an input field.

I am not sure if I can achieve that with this:

chrome.tabs.getSelected(null, function(tab) {  
    var currentTitle = tab.title;  
});

Then I need to get the Meta description, which I don't believe I can get from the tab data.

This is the HTML I am getting the description from:

<meta name="description" content="contentstuffya" />

This is the Javascript I am using to get it outside of the extension:

document.getElementsByName('description')[0].getAttribute('content');

How would I best do this given the data that I have?

Adam Link
  • 2,783
  • 4
  • 30
  • 44
jonode
  • 797
  • 4
  • 15

2 Answers2

9

The value of a <meta> tag can only be read through a content script. Here's an example:

var code = 'var meta = document.querySelector("meta[name=\'description\']");' + 
           'if (meta) meta = meta.getAttribute("content");' +
           '({' +
           '    title: document.title,' +
           '    description: meta || ""' +
           '});';
chrome.tabs.executeScript({
    code: code
}, function(results) {
    if (!results) {
        // An error occurred at executing the script. You've probably not got
        // the permission to execute a content script for the current tab
        return;
    }
    var result = results[0];
    // Now, do something with result.title and result.description
});

At the first line, I locate the <meta name="description"> element. At the second line, I read the value of its content attribute if the element is present.
The callback of chrome.tabs.executeScript receives the last expression's return value, so I've put an object literal (wrapped in parentheses) at the end of the code.

Rob W
  • 341,306
  • 83
  • 791
  • 678
  • Yes, I am a rookie. Maybe this is apparent from here but I am trying to return the title and meta to two input fields in my extension. So the title would be the value of one input and the meta would be the value of another. How would I do that from this point? The executeScript makes all the js inside of it execute on the current tab rather than back at my extension. – jonode Oct 17 '13 at 16:11
  • @user2879869 So, you don't know how to continue at `// Now, do something with result.title and result.description`? What code do you have already? If you've got something like ``, then you can use `document.getElementById('title').value = result.title;`, for example. EDIT: The `code` in `executeScript` is executed in the context of the tab, but its callback runs in the original context, probably your extension's popup. – Rob W Oct 17 '13 at 16:15
  • So replace `// Now, do something with result.title and result.description` with `document.getElementById('title').value = result.title;` ? – jonode Oct 17 '13 at 16:35
  • @user2879869 Yes, provided that you've got some HTML with ID `title`, i.e.. ``. – Rob W Oct 17 '13 at 16:36
  • this is what I get now `Uncaught ReferenceError: result is not defined ` I appreciate the help, I am brand new to Javascript. – jonode Oct 17 '13 at 16:42
  • @user2879869 You probably removed `var result = ...;` by accident. Put it back, and follow the format of my answer. – Rob W Oct 17 '13 at 16:45
  • I got it to work, thanks. Do you happen to know how I can make it insensitive to case? – jonode Oct 17 '13 at 20:58
  • Make what case-insensitive? HTML attributes are already case-insensitive, `document.querySelector('MeTa[NaMe="DesCription"]')` does the same thing as the all-lowercase variant. – Rob W Oct 17 '13 at 21:01
  • For some reason it doesn't grab it if its not lowercase. Beats me. – jonode Oct 17 '13 at 21:40
  • @user2879869 Probably a XHTML document. You can include multiple selectors, separated by commas: `'meta[name="description"],META[NAME="DESCRIPTION"]'` (and so on). – Rob W Oct 17 '13 at 21:44
  • @RobW how to get the og:image – Arun Prasad E S Oct 27 '17 at 09:50
-1

A better way to do it is using this.

  function getMeta(metaName) {
   const metas = document.getElementsByTagName('meta');

   for (let i = 0; i < metas.length; i++) {
    if (metas[i].getAttribute('name') === metaName) {
      return metas[i].getAttribute('content');
    }
   }

   return '';
  }

  console.log(getMeta('description'));

To get the title you can just use

console.log(document.title)

How do I get the information from a meta tag with JavaScript?

Andrew
  • 399
  • 6
  • 15